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

Dialpad's Dialtone design system monorepo

import u from "./notice-icon.js";
import m from "./notice-content.js";
import _ from "./notice-action.js";
import { NOTICE_KINDS as p, NOTICE_ROLES as h } from "./notice-constants.js";
import { resolveComponent as i, createElementBlock as C, openBlock as d, normalizeClass as y, createBlock as k, createCommentVNode as I, createVNode as l, withCtx as n, renderSlot as o } from "vue";
import { _ as N } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
const g = {
  compatConfig: { MODE: 3 },
  name: "DtNotice",
  components: {
    DtNoticeIcon: u,
    DtNoticeContent: m,
    DtNoticeAction: _
  },
  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 notice. This can be left blank to remove the title from the notice entirely.
     */
    title: {
      type: String,
      default: ""
    },
    /**
     * Provides a role for the notice. 'status' is used to communicate a message. 'alert' is used to communicate an
     * important message that does not contain any interactive elements. 'alertdialog' is used to communicate an
     * important message that does contain interactive elements.
     * @values alert, alertdialog, status
     */
    role: {
      type: String,
      default: "status",
      validate(t) {
        return h.includes(t);
      }
    },
    /**
     * Used in scenarios where the message needs to visually dominate the screen.
     * This will also change the aria role from status to alert.
     * @values true, false
     */
    important: {
      type: Boolean,
      default: !1
    },
    /**
     * Severity level of the notice, sets the icon and background
     * @values base, error, info, success, warning
     */
    kind: {
      type: String,
      default: "base",
      validate(t) {
        return p.includes(t);
      }
    },
    /**
     * Hides the close button from the notice
     * @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
    },
    /**
     * Truncates the content instead of wrapping.
     * Used when the notice needs to have a fixed height.
     * @values true, false
     */
    truncateText: {
      type: Boolean,
      default: !1
    }
  },
  emits: [
    /**
     * Close button click event
     *
     * @event close
     */
    "close",
    /**
     * Native button click event
     *
     * @event click
     * @type {PointerEvent | KeyboardEvent}
     */
    "click"
  ],
  computed: {
    noticeClass() {
      return [
        "d-notice",
        {
          error: "d-notice--error",
          info: "d-notice--info",
          success: "d-notice--success",
          warning: "d-notice--warning",
          base: "d-notice--base"
        }[this.kind],
        { "d-notice--important": this.important, "d-notice--truncate": this.truncateText }
      ];
    }
  }
};
function B(t, c, e, S, v, a) {
  const r = i("dt-notice-icon"), s = i("dt-notice-content"), f = i("dt-notice-action");
  return d(), C("aside", {
    class: y(a.noticeClass),
    "data-qa": "notice"
  }, [
    e.hideIcon ? I("", !0) : (d(), k(r, {
      key: 0,
      kind: e.kind
    }, {
      default: n(() => [
        o(t.$slots, "icon")
      ]),
      _: 3
    }, 8, ["kind"])),
    l(s, {
      "title-id": e.titleId,
      "content-id": e.contentId,
      title: e.title,
      role: e.role
    }, {
      titleOverride: n(() => [
        o(t.$slots, "titleOverride")
      ]),
      default: n(() => [
        o(t.$slots, "default")
      ]),
      _: 3
    }, 8, ["title-id", "content-id", "title", "role"]),
    l(f, {
      "hide-action": e.hideAction,
      "hide-close": e.hideClose,
      onClose: c[0] || (c[0] = (D) => t.$emit("close"))
    }, {
      default: n(() => [
        o(t.$slots, "action")
      ]),
      _: 3
    }, 8, ["hide-action", "hide-close"])
  ], 2);
}
const K = /* @__PURE__ */ N(g, [["render", B]]);
export {
  K as default
};
//# sourceMappingURL=notice.js.map