@dialpad/dialtone-vue/dist/lib/validation-messages/validation-messages.cjs.map

Vue component library for Dialpad's design system Dialtone

{"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  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"],"mappings":"mQAoCAA,EAAA,CACA,KAAA,uBAEA,MAAA,CAIA,GAAA,CACA,KAAA,OACA,SAAA,CACA,OAAAC,kBAAA,CACA,CACA,EAMA,mBAAA,CACA,KAAA,MACA,QAAA,IAAA,CAAA,EACA,UAAAC,GAAAC,EAAAA,2BAAAD,CAAA,CACA,EAMA,aAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EAEA,SAAA,CACA,mCAAA,CACA,OAAA,KAAA,2BAAA,SAAA,CACA,EAEA,4BAAA,CACA,OAAAE,EAAAA,wBAAA,KAAA,kBAAA,CACA,EAEA,iBAAA,CACA,OAAAC,EAAAA,mBAAA,KAAA,kBAAA,CACA,CACA,EAEA,QAAA,CACA,cAAAC,EAAAC,EAAA,CACA,MAAA,sBAAAD,CAAA,IAAAC,CAAA,IAAA,KAAA,EAAA,EACA,EAEA,iBAAAD,EAAA,CAOA,MANA,CACA,MAAA,yDACA,QAAA,6DACA,QAAA,4DACA,EAEAA,CAAA,CACA,CACA,CACA"}