@dialpad/dialtone/dist/vue3/components/notice/notice.vue.js

Dialpad's Dialtone design system monorepo

import DtNoticeIcon from "./notice_icon.vue.js";
import DtNoticeContent from "./notice_content.vue.js";
import DtNoticeAction from "./notice_action.vue.js";
import { NOTICE_ROLES, NOTICE_KINDS } from "./notice_constants.js";
import SrOnlyCloseButtonMixin from "../../common/mixins/sr_only_close_button.js";
import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createCommentVNode, createVNode } from "vue";
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
const _sfc_main = {
  compatConfig: { MODE: 3 },
  name: "DtNotice",
  components: {
    DtNoticeIcon,
    DtNoticeContent,
    DtNoticeAction
  },
  mixins: [SrOnlyCloseButtonMixin],
  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(role) {
        return NOTICE_ROLES.includes(role);
      }
    },
    /**
     * 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: false
    },
    /**
     * Severity level of the notice, sets the icon and background
     * @values base, error, info, success, warning
     */
    kind: {
      type: String,
      default: "base",
      validate(kind) {
        return NOTICE_KINDS.includes(kind);
      }
    },
    /**
     * Props for the notice close button.
     */
    closeButtonProps: {
      type: Object,
      default: () => ({})
    },
    /**
     * Hides the close button from the notice
     * @values true, false
     */
    hideClose: {
      type: Boolean,
      default: false
    },
    /**
     * Hides the icon from the notice
     * @values true, false
     */
    hideIcon: {
      type: Boolean,
      default: false
    },
    /**
     * Hides the action from the notice
     * @values true, false
     */
    hideAction: {
      type: Boolean,
      default: false
    },
    /**
     * Truncates the content instead of wrapping.
     * Used when the notice needs to have a fixed height.
     * @values true, false
     */
    truncateText: {
      type: Boolean,
      default: false
    }
  },
  emits: [
    /**
     * Close button click event
     *
     * @event close
     */
    "close",
    /**
     * Native button click event
     *
     * @event click
     * @type {PointerEvent | KeyboardEvent}
     */
    "click"
  ],
  computed: {
    noticeClass() {
      const noticeKinds = {
        error: "d-notice--error",
        info: "d-notice--info",
        success: "d-notice--success",
        warning: "d-notice--warning",
        base: "d-notice--base"
      };
      return [
        "d-notice",
        noticeKinds[this.kind],
        { "d-notice--important": this.important, "d-notice--truncate": this.truncateText }
      ];
    }
  }
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_dt_notice_icon = resolveComponent("dt-notice-icon");
  const _component_dt_notice_content = resolveComponent("dt-notice-content");
  const _component_dt_notice_action = resolveComponent("dt-notice-action");
  return openBlock(), createElementBlock("aside", {
    class: normalizeClass($options.noticeClass),
    "data-qa": "notice"
  }, [
    !$props.hideIcon ? (openBlock(), createBlock(_component_dt_notice_icon, {
      key: 0,
      kind: $props.kind
    }, {
      default: withCtx(() => [
        renderSlot(_ctx.$slots, "icon")
      ]),
      _: 3
    }, 8, ["kind"])) : createCommentVNode("", true),
    createVNode(_component_dt_notice_content, {
      "title-id": $props.titleId,
      "content-id": $props.contentId,
      title: $props.title,
      role: $props.role
    }, {
      titleOverride: withCtx(() => [
        renderSlot(_ctx.$slots, "titleOverride")
      ]),
      default: withCtx(() => [
        renderSlot(_ctx.$slots, "default")
      ]),
      _: 3
    }, 8, ["title-id", "content-id", "title", "role"]),
    createVNode(_component_dt_notice_action, {
      "hide-action": $props.hideAction,
      "hide-close": $props.hideClose,
      "close-button-props": $props.closeButtonProps,
      "visually-hidden-close": _ctx.visuallyHiddenClose,
      "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
      onClose: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
    }, {
      default: withCtx(() => [
        renderSlot(_ctx.$slots, "action")
      ]),
      _: 3
    }, 8, ["hide-action", "hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])
  ], 2);
}
const notice = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  notice as default
};
//# sourceMappingURL=notice.vue.js.map