@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
91 lines (90 loc) • 3.1 kB
JavaScript
import { validationMessageValidator } from "../../common/validators.js";
import { getUniqueString, filterFormattedMessages, getValidationState } from "../../common/utils.js";
import { openBlock, createElementBlock, Fragment, renderList, normalizeClass, createElementVNode, createCommentVNode } from "vue";
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
const _sfc_main = {
compatConfig: { MODE: 3 },
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];
}
}
};
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 ? (openBlock(), createElementBlock("div", _hoisted_1, [
(openBlock(true), createElementBlock(Fragment, null, renderList($options.filteredValidationMessages, ({ message, type }, index) => {
return openBlock(), createElementBlock("div", {
key: $options.getMessageKey(type, index),
role: "status",
"aria-live": "polite",
"data-qa": "validation-message",
class: normalizeClass([
"base-input__message",
"d-validation-message",
$options.messageTypeClass(type)
])
}, [
createElementVNode("p", { innerHTML: message }, null, 8, _hoisted_2)
], 2);
}), 128))
])) : createCommentVNode("", true);
}
const DtValidationMessages = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
DtValidationMessages as default
};
//# sourceMappingURL=validation_messages.vue.js.map