@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
235 lines (234 loc) • 7.05 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const common_utils = require("../../common/utils.cjs");
const toast_constants = require("./toast_constants.cjs");
const sr_only_close_button = require("../../common/mixins/sr_only_close_button.cjs");
const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
const notice_icon = require("../notice/notice_icon.vue.cjs");
const notice_content = require("../notice/notice_content.vue.cjs");
const notice_action = require("../notice/notice_action.vue.cjs");
const notice_constants = require("../notice/notice_constants.cjs");
const _sfc_main = {
name: "DtToast",
components: {
DtNoticeIcon: notice_icon.default,
DtNoticeContent: notice_content.default,
DtNoticeAction: notice_action.default
},
mixins: [sr_only_close_button.default],
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() {
return common_utils.default.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 common_utils.default.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: (role) => {
return toast_constants.TOAST_ROLES.includes(role);
}
},
/**
* Severity level of the toast, sets the icon and background
* @values base, error, info, success, warning
*/
kind: {
type: String,
default: "base",
validator: (kind) => {
return notice_constants.NOTICE_KINDS.includes(kind);
}
},
/**
* Used in scenarios where the message needs to visually dominate the screen.
* @values true, false
*/
important: {
type: Boolean,
default: false
},
/**
* 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: false
},
/**
* Props for the toast close button.
*/
closeButtonProps: {
type: Object,
default: () => ({})
},
/**
* Hides the close button from the toast
* @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
},
/**
* 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: (duration) => {
return duration >= toast_constants.TOAST_MIN_DURATION;
}
}
},
emits: [
/**
* Close button click event
*
* @event close
*/
"close",
/**
* Sync show value
*
* @event update:show
*/
"update:show"
],
data() {
return {
isShown: false,
minDuration: toast_constants.TOAST_MIN_DURATION
};
},
computed: {
kindClass() {
const kindClasses = {
error: "d-toast--error",
info: "d-toast--info",
success: "d-toast--success",
warning: "d-toast--warning",
base: "d-toast--base"
};
return kindClasses[this.kind];
},
noticeActionListeners() {
return {
...this.$listeners,
close: (event) => {
this.isShown = false;
this.$emit("update:show", false);
this.$emit("close", event);
}
};
},
shouldSetTimeout() {
return !!this.duration && this.duration >= this.minDuration;
}
},
watch: {
show: {
handler: function(show) {
this.isShown = show;
if (show) {
this.setTimeout();
} else {
clearTimeout(this.displayTimer);
}
},
immediate: true
}
},
destroyed() {
if (this.shouldSetTimeout) {
clearTimeout(this.displayTimer);
}
},
methods: {
setTimeout() {
if (this.shouldSetTimeout) {
this.displayTimer = setTimeout(() => {
this.isShown = false;
this.$emit("update:show", false);
}, this.duration);
}
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _vm.isShown ? _c("div", { class: [
"d-toast",
_vm.kindClass,
{ "d-toast--important": _vm.important }
], attrs: { "data-qa": "dt-toast", "aria-hidden": (!_vm.isShown).toString() } }, [_c("div", { staticClass: "d-toast__dialog" }, [!_vm.hideIcon ? _c("dt-notice-icon", _vm._g({ attrs: { "kind": _vm.kind } }, _vm.$listeners), [_vm._t("icon")], 2) : _vm._e(), _c("dt-notice-content", _vm._g({ attrs: { "title-id": _vm.titleId, "content-id": _vm.contentId, "title": _vm.title, "role": _vm.role }, scopedSlots: _vm._u([{ key: "titleOverride", fn: function() {
return [_vm._t("titleOverride")];
}, proxy: true }], null, true) }, _vm.$listeners), [_vm._t("default", function() {
return [_vm._v(" " + _vm._s(_vm.message) + " ")];
})], 2), _c("dt-notice-action", _vm._g({ attrs: { "hide-action": _vm.hideAction, "hide-close": _vm.hideClose, "close-button-props": _vm.closeButtonProps, "visually-hidden-close": _vm.visuallyHiddenClose, "visually-hidden-close-label": _vm.visuallyHiddenCloseLabel } }, _vm.noticeActionListeners), [_vm._t("action")], 2)], 1)]) : _vm._e();
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const toast = __component__.exports;
exports.default = toast;
//# sourceMappingURL=toast.vue.cjs.map