@dialpad/dialtone/dist/vue3/lib/toast/toast.js

Dialpad's Dialtone design system monorepo

import { TOAST_ROLES as A, TOAST_ALTERNATE_KINDS as O, TOAST_MIN_DURATION as v, TOAST_LAYOUTS as U } from "./toast-constants.js";
import m from "../../common/utils/index.js";
import { resolveComponent as l, createElementBlock as p, createCommentVNode as r, openBlock as d, normalizeClass as B, createElementVNode as u, createBlock as _, createVNode as h, mergeProps as s, withCtx as i, renderSlot as n, createTextVNode as T, toDisplayString as C, resolveDynamicComponent as N } from "vue";
import { _ as y } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import L from "../notice/notice-action.js";
import E from "../notice/notice-content.js";
import M from "../notice/notice-icon.js";
import { NOTICE_KINDS as R } from "../notice/notice-constants.js";
import { DtIconSparkle as $, DtIconBell as b, DtIconAlertTriangle as z, DtIconInfo as f } from "@dialpad/dialtone-icons/vue3";
import { ICON_SIZE_MODIFIERS as V } from "../icon/icon-constants.js";
const K = {
  name: "ToastLayoutDefault",
  components: {
    DtNoticeIcon: M,
    DtNoticeContent: E,
    DtNoticeAction: L
  },
  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) => A.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) => R.includes(t)
    },
    /**
     * 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
    }
  },
  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];
    }
  }
}, j = ["aria-hidden"], F = { class: "d-toast__dialog" };
function P(t, a, e, g, c, o) {
  const S = l("dt-notice-icon"), I = l("dt-notice-content"), k = l("dt-notice-action");
  return e.isShown ? (d(), p("div", {
    key: 0,
    class: B([
      "d-toast",
      o.kindClass,
      { "d-toast--important": e.important }
    ]),
    "data-qa": "dt-toast",
    "aria-hidden": (!e.isShown).toString()
  }, [
    u("div", F, [
      e.hideIcon ? r("", !0) : (d(), _(S, s({
        key: 0,
        kind: e.kind
      }, t.$attrs), {
        default: i(() => [
          n(t.$slots, "icon")
        ]),
        _: 3
      }, 16, ["kind"])),
      h(I, s({
        "title-id": e.titleId,
        "content-id": e.contentId,
        title: e.title,
        role: e.role
      }, t.$attrs), {
        titleOverride: i(() => [
          n(t.$slots, "titleOverride")
        ]),
        default: i(() => [
          n(t.$slots, "default", {}, () => [
            T(C(e.message), 1)
          ])
        ]),
        _: 3
      }, 16, ["title-id", "content-id", "title", "role"]),
      h(k, s({
        "hide-action": e.hideAction,
        "hide-close": e.hideClose
      }, t.$attrs, {
        onClose: a[0] || (a[0] = (q) => t.$emit("close"))
      }), {
        default: i(() => [
          n(t.$slots, "action")
        ]),
        _: 3
      }, 16, ["hide-action", "hide-close"])
    ])
  ], 10, j)) : r("", !0);
}
const w = /* @__PURE__ */ y(K, [["render", P]]), Y = /* @__PURE__ */ new Map([
  ["info", f],
  ["success", f],
  ["warning", z],
  ["error", f],
  ["base", b],
  ["gradient", $]
]), Z = {
  compatConfig: { MODE: 3 },
  name: "DtToastLayoutAlternateIcon",
  components: {
    DtIconInfo: f,
    DtIconAlertTriangle: z,
    DtIconBell: b,
    DtIconSparkle: $
  },
  props: {
    /**
     * Kind of icon
     * @values base, error, info, success, warning
     */
    kind: {
      type: String,
      default: "base",
      validate(t) {
        return O.includes(t);
      }
    },
    size: {
      type: String,
      default: "400",
      validator: (t) => Object.keys(V).includes(t)
    }
  },
  computed: {
    defaultIcon() {
      return Y.get(this.kind);
    }
  }
}, G = {
  "aria-hidden": "true",
  class: "d-toast-layout-alternate__icon"
};
function H(t, a, e, g, c, o) {
  return d(), p("div", G, [
    n(t.$slots, "default", {}, () => [
      o.defaultIcon ? (d(), _(N(o.defaultIcon), {
        key: 0,
        size: e.size
      }, null, 8, ["size"])) : r("", !0)
    ])
  ]);
}
const J = /* @__PURE__ */ y(Z, [["render", H]]), Q = {
  name: "ToastLayoutAlternate",
  components: {
    DtNoticeAction: L,
    DtNoticeContent: E,
    DtToastLayoutAlternateIcon: J
  },
  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) => A.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) => O.includes(t)
    },
    /**
     * 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];
    }
  }
}, W = ["aria-hidden"], X = { class: "d-toast-alternate__dialog" }, x = { class: "d-toast-alternate__header" }, tt = { class: "d-toast-alternate__content" };
function et(t, a, e, g, c, o) {
  const S = l("dt-toast-layout-alternate-icon"), I = l("dt-notice-content"), k = l("dt-notice-action");
  return e.isShown ? (d(), p("div", {
    key: 0,
    class: B([
      "d-toast-alternate",
      o.kindClass
    ]),
    "data-qa": "dt-toast",
    "aria-hidden": (!e.isShown).toString()
  }, [
    u("div", X, [
      u("div", x, [
        e.hideIcon ? r("", !0) : (d(), _(S, s({
          key: 0,
          kind: e.kind,
          size: "200"
        }, t.$attrs), {
          default: i(() => [
            n(t.$slots, "icon")
          ]),
          _: 3
        }, 16, ["kind"])),
        h(I, s({
          "title-id": e.titleId,
          "content-id": e.contentId,
          title: e.title,
          role: e.role
        }, t.$attrs), {
          titleOverride: i(() => [
            n(t.$slots, "titleOverride")
          ]),
          _: 3
        }, 16, ["title-id", "content-id", "title", "role"]),
        h(k, s({
          "hide-action": !0,
          "hide-close": e.hideClose,
          "button-size": "xs"
        }, t.$attrs, {
          onClose: a[0] || (a[0] = (q) => t.$emit("close"))
        }), null, 16, ["hide-close"])
      ]),
      u("div", tt, [
        n(t.$slots, "default", {}, () => [
          T(C(e.message), 1)
        ])
      ])
    ])
  ], 10, W)) : r("", !0);
}
const D = /* @__PURE__ */ y(Q, [["render", et]]), nt = {
  compatConfig: { MODE: 3 },
  name: "DtToast",
  components: {
    ToastLayoutDefault: w,
    ToastLayoutAlternate: D
  },
  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
    },
    /**
     * 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 >= v
    },
    /**
     * The layout / styling you wish to use for the toast.
     * @values default, alternate
     */
    layout: {
      type: String,
      default: "default",
      validator: (t) => U.includes(t)
    }
  },
  emits: [
    /**
     * Close button click event
     *
     * @event close
     */
    "close",
    /**
     * Sync show value
     *
     * @event update:show
     */
    "update:show"
  ],
  data() {
    return {
      isShown: !1,
      minDuration: v
    };
  },
  computed: {
    shouldSetTimeout() {
      return !!this.duration && this.duration >= this.minDuration;
    },
    selectedLayout() {
      return this.layout === "alternate" ? D : w;
    }
  },
  watch: {
    show: {
      handler: function(t) {
        this.isShown = t, t ? 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 it(t, a, e, g, c, o) {
  return d(), _(N(o.selectedLayout), s({
    "is-shown": c.isShown,
    "title-id": e.titleId,
    "content-id": e.contentId,
    title: e.title,
    message: e.message,
    role: e.role,
    kind: e.kind,
    important: e.important,
    "hide-close": e.hideClose,
    "hide-icon": e.hideIcon,
    "hide-action": e.hideAction
  }, t.$attrs, { onClose: o.handleClose }), {
    icon: i(() => [
      n(t.$slots, "icon")
    ]),
    titleOverride: i(() => [
      n(t.$slots, "titleOverride")
    ]),
    action: i(() => [
      n(t.$slots, "action")
    ]),
    default: i(() => [
      n(t.$slots, "default", {}, () => [
        T(C(e.message), 1)
      ])
    ]),
    _: 3
  }, 16, ["is-shown", "title-id", "content-id", "title", "message", "role", "kind", "important", "hide-close", "hide-icon", "hide-action", "onClose"]);
}
const ht = /* @__PURE__ */ y(nt, [["render", it]]);
export {
  ht as default
};
//# sourceMappingURL=toast.js.map