@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
80 lines (79 loc) • 2.71 kB
JavaScript
import { validationMessageValidator } from "../../common/validators.js";
import { getUniqueString, filterFormattedMessages, getValidationState } from "../../common/utils.js";
import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
const _sfc_main = {
name: "DtValidationMessages",
props: {
/**
* The id of the validation message
*/
id: {
type: String,
default() {
return getUniqueString();
}
},
/**
* Array of validation messages. Each message has the following structure:
* `{ message: "Some informative message", type: "error|warning|success"}`
*/
validationMessages: {
type: Array,
default: () => [],
validator: (messages) => validationMessageValidator(messages)
},
/**
* Show Validation messages
* @values true, false
*/
showMessages: {
type: Boolean,
default: true
}
},
computed: {
isFilteredValidationMessagesEmpty() {
return this.filteredValidationMessages.length === 0;
},
filteredValidationMessages() {
return filterFormattedMessages(this.validationMessages);
},
validationState() {
return getValidationState(this.validationMessages);
}
},
methods: {
getMessageKey(type, index) {
return `validation-message-${type}-${index}-${this.id}`;
},
messageTypeClass(type) {
const messageTypesClasses = {
error: "base-input__message--error d-validation-message--error",
warning: "base-input__message--warning d-validation-message--warning",
success: "base-input__message--success d-validation-message--success"
};
return messageTypesClasses[type];
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _vm.showMessages && !_vm.isFilteredValidationMessagesEmpty ? _c("div", { staticClass: "base-input__messages d-validation-message__container", attrs: { "data-qa": "validation-messages-container" } }, _vm._l(_vm.filteredValidationMessages, function({ message, type }, index) {
return _c("div", { key: _vm.getMessageKey(type, index), class: [
"base-input__message",
"d-validation-message",
_vm.messageTypeClass(type)
], attrs: { "role": "status", "aria-live": "polite", "data-qa": "validation-message" } }, [_c("p", { domProps: { "innerHTML": _vm._s(message) } })]);
}), 0) : _vm._e();
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const DtValidationMessages = __component__.exports;
export {
DtValidationMessages as default
};
//# sourceMappingURL=validation_messages.vue.js.map