@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 4.41 kB
Source Map (JSON)
{"version":3,"file":"validation_messages.vue.cjs","sources":["../../../components/validation_messages/validation_messages.vue"],"sourcesContent":["<template>\n <div\n v-if=\"showMessages && !isFilteredValidationMessagesEmpty\"\n class=\"base-input__messages d-validation-message__container\"\n data-qa=\"validation-messages-container\"\n >\n <div\n v-for=\"({ message, type }, index) in filteredValidationMessages\"\n :key=\"getMessageKey(type, index)\"\n role=\"status\"\n aria-live=\"polite\"\n data-qa=\"validation-message\"\n :class=\"[\n 'base-input__message',\n 'd-validation-message',\n messageTypeClass(type),\n ]\"\n >\n <p v-html=\"message\" />\n </div>\n </div>\n</template>\n\n<script>\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n getUniqueString,\n filterFormattedMessages,\n getValidationState,\n} from '@/common/utils';\n\n/**\n * Validation messages are used to convey information to the user about the current state of the input element.\n * These messages can have an error, warning or success type.\n * @see https://dialtone.dialpad.com/components/validation_messages.html\n */\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtValidationMessages',\n\n props: {\n /**\n * The id of the validation message\n */\n id: {\n type: String,\n default () {\n return getUniqueString();\n },\n },\n\n /**\n * Array of validation messages. Each message has the following structure:\n * `{ message: \"Some informative message\", type: \"error|warning|success\"}`\n */\n validationMessages: {\n type: Array,\n default: () => [],\n validator: messages => validationMessageValidator(messages),\n },\n\n /**\n * Show Validation messages\n * @values true, false\n */\n showMessages: {\n type: Boolean,\n default: true,\n },\n },\n\n computed: {\n isFilteredValidationMessagesEmpty () {\n return this.filteredValidationMessages.length === 0;\n },\n\n filteredValidationMessages () {\n return filterFormattedMessages(this.validationMessages);\n },\n\n validationState () {\n return getValidationState(this.validationMessages);\n },\n },\n\n methods: {\n getMessageKey (type, index) {\n return `validation-message-${type}-${index}-${this.id}`;\n },\n\n messageTypeClass (type) {\n const messageTypesClasses = {\n error: 'base-input__message--error d-validation-message--error',\n warning: 'base-input__message--warning d-validation-message--warning',\n success: 'base-input__message--success d-validation-message--success',\n };\n\n return messageTypesClasses[type];\n },\n },\n};\n</script>\n"],"names":["getUniqueString","validationMessageValidator","filterFormattedMessages","getValidationState","_openBlock","_createElementBlock","_Fragment","_renderList","_normalizeClass","_createElementVNode","_createCommentVNode"],"mappings":";;;;;;AAoCA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAW;AACT,eAAOA,aAAe,gBAAA;AAAA,MACvB;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,MACjB,WAAW,cAAYC,kBAA0B,2BAAC,QAAQ;AAAA,IAC3D;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,oCAAqC;AACnC,aAAO,KAAK,2BAA2B,WAAW;AAAA,IACnD;AAAA,IAED,6BAA8B;AAC5B,aAAOC,aAAuB,wBAAC,KAAK,kBAAkB;AAAA,IACvD;AAAA,IAED,kBAAmB;AACjB,aAAOC,aAAkB,mBAAC,KAAK,kBAAkB;AAAA,IAClD;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,cAAe,MAAM,OAAO;AAC1B,aAAO,sBAAsB,IAAI,IAAI,KAAK,IAAI,KAAK,EAAE;AAAA,IACtD;AAAA,IAED,iBAAkB,MAAM;AACtB,YAAM,sBAAsB;AAAA,QAC1B,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA;AAGX,aAAO,oBAAoB,IAAI;AAAA,IAChC;AAAA,EACF;AACH;;EApGA,KAAA;AAAA,EAGI,OAAM;AAAA,EACN,WAAQ;;AAJZ,MAAA,aAAA,CAAA,WAAA;;AAEU,SAAA,OAAA,iBAAiB,SAAiC,qCAD1DC,IAAAA,aAAAC,IAAAA,mBAmBM,OAnBN,YAmBM;AAAA,0BAdJA,uBAaMC,IAAAA,UAAA,MAnBVC,IAAAA,WAO2C,SAA0B,4BAPrE,GAOgB,SAAS,KAAI,GAAI,UAAK;8BADlCF,IAaM,mBAAA,OAAA;AAAA,QAXH,KAAK,SAAA,cAAc,MAAM,KAAK;AAAA,QAC/B,MAAK;AAAA,QACL,aAAU;AAAA,QACV,WAAQ;AAAA,QACP,OAZPG,IAAAA,eAAA;AAAA;;UAYuF,SAAA,iBAAiB,IAAI;AAAA;;QAMtGC,IAAA,mBAAsB,KAAnB,EAAA,WAAQ,QAAO,GAlBxB,MAAA,GAAA,UAAA;AAAA;;QAAAC,IAAA,mBAAA,IAAA,IAAA;;;;"}