@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
91 lines (90 loc) • 3.2 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const common_validators = require("../../common/validators.cjs");
const common_utils = require("../../common/utils.cjs");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtValidationMessages",
props: {
/**
* The id of the validation message
*/
id: {
type: String,
default() {
return common_utils.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) => common_validators.validationMessageValidator(messages)
},
/**
* Show Validation messages
* @values true, false
*/
showMessages: {
type: Boolean,
default: true
}
},
computed: {
isFilteredValidationMessagesEmpty() {
return this.filteredValidationMessages.length === 0;
},
filteredValidationMessages() {
return common_utils.filterFormattedMessages(this.validationMessages);
},
validationState() {
return common_utils.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];
}
}
};
const _hoisted_1 = {
key: 0,
class: "base-input__messages d-validation-message__container",
"data-qa": "validation-messages-container"
};
const _hoisted_2 = ["innerHTML"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return $props.showMessages && !$options.isFilteredValidationMessagesEmpty ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.filteredValidationMessages, ({ message, type }, index) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: $options.getMessageKey(type, index),
role: "status",
"aria-live": "polite",
"data-qa": "validation-message",
class: vue.normalizeClass([
"base-input__message",
"d-validation-message",
$options.messageTypeClass(type)
])
}, [
vue.createElementVNode("p", { innerHTML: message }, null, 8, _hoisted_2)
], 2);
}), 128))
])) : vue.createCommentVNode("", true);
}
const DtValidationMessages = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = DtValidationMessages;
//# sourceMappingURL=validation_messages.vue.cjs.map