@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 4.16 kB
Source Map (JSON)
{"version":3,"file":"validation-messages.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":["_sfc_main","getUniqueString","messages","validationMessageValidator","filterFormattedMessages","getValidationState","type","index","_hoisted_2","$props","$options","_openBlock","_createElementBlock","_hoisted_1","_Fragment","_renderList","message","_normalizeClass","_createElementVNode","_createCommentVNode"],"mappings":"sRAoCKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,uBAEN,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAW,CACT,OAAOC,kBAAe,CACxB,GAOF,mBAAoB,CAClB,KAAM,MACN,QAAS,IAAM,CAAA,EACf,UAAWC,GAAYC,EAAAA,2BAA2BD,CAAQ,GAO5D,aAAc,CACZ,KAAM,QACN,QAAS,KAIb,SAAU,CACR,mCAAqC,CACnC,OAAO,KAAK,2BAA2B,SAAW,CACpD,EAEA,4BAA8B,CAC5B,OAAOE,EAAAA,wBAAwB,KAAK,kBAAkB,CACxD,EAEA,iBAAmB,CACjB,OAAOC,EAAAA,mBAAmB,KAAK,kBAAkB,CACnD,GAGF,QAAS,CACP,cAAeC,EAAMC,EAAO,CAC1B,MAAO,sBAAsBD,CAAI,IAAIC,CAAK,IAAI,KAAK,EAAE,EACvD,EAEA,iBAAkBD,EAAM,CAOtB,MAN4B,CAC1B,MAAO,yDACP,QAAS,6DACT,QAAS,8DAGgBA,CAAI,CACjC,EAEJ,KApGA,IAAA,EAGI,MAAM,uDACN,UAAQ,iCAJZE,EAAA,CAAA,WAAA,0BAEU,OAAAC,EAAA,eAAiBC,EAAA,mCADzBC,EAAAA,YAAAC,EAAAA,mBAmBM,MAnBNC,EAmBM,kBAdJD,qBAaME,EAAAA,SAAA,KAnBVC,EAAAA,WAO2CL,EAAA,2BAP3C,EAOgB,QAAAM,EAAS,KAAAV,CAAI,EAAIC,mBAD7BK,EAAAA,mBAaM,MAAA,CAXH,IAAKF,EAAA,cAAcJ,EAAMC,CAAK,EAC/B,KAAK,SACL,YAAU,SACV,UAAQ,qBACP,MAZPU,EAAAA,eAAA,8CAYuFP,EAAA,iBAAiBJ,CAAI,MAMtGY,EAAAA,mBAAsB,IAAA,CAAnB,UAAQF,CAAO,EAAA,KAAA,EAlBxBR,CAAA,iBAAAW,EAAAA,mBAAA,GAAA,EAAA"}