@dialpad/dialtone-vue/dist/lib/validation-messages/validation-messages.js

Vue component library for Dialpad's design system Dialtone

import { validationMessageValidator as r } from "../../common/validators/index.js";
import { getValidationState as o, filterFormattedMessages as d, getUniqueString as l } from "../../common/utils/index.js";
import { n as g } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
const m = {
  name: "DtValidationMessages",
  props: {
    /**
     * The id of the validation message
     */
    id: {
      type: String,
      default() {
        return l();
      }
    },
    /**
     * Array of validation messages. Each message has the following structure:
     * `{ message: "Some informative message", type: "error|warning|success"}`
     */
    validationMessages: {
      type: Array,
      default: () => [],
      validator: (s) => r(s)
    },
    /**
     * Show Validation messages
     * @values true, false
     */
    showMessages: {
      type: Boolean,
      default: !0
    }
  },
  computed: {
    isFilteredValidationMessagesEmpty() {
      return this.filteredValidationMessages.length === 0;
    },
    filteredValidationMessages() {
      return d(this.validationMessages);
    },
    validationState() {
      return o(this.validationMessages);
    }
  },
  methods: {
    getMessageKey(s, e) {
      return `validation-message-${s}-${e}-${this.id}`;
    },
    messageTypeClass(s) {
      return {
        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"
      }[s];
    }
  }
};
var _ = function() {
  var e = this, a = e._self._c;
  return e.showMessages && !e.isFilteredValidationMessagesEmpty ? a("div", { staticClass: "base-input__messages d-validation-message__container", attrs: { "data-qa": "validation-messages-container" } }, e._l(e.filteredValidationMessages, function({ message: i, type: t }, n) {
    return a("div", { key: e.getMessageKey(t, n), class: [
      "base-input__message",
      "d-validation-message",
      e.messageTypeClass(t)
    ], attrs: { role: "status", "aria-live": "polite", "data-qa": "validation-message" } }, [a("p", { domProps: { innerHTML: e._s(i) } })]);
  }), 0) : e._e();
}, p = [], u = /* @__PURE__ */ g(
  m,
  _,
  p
);
const M = u.exports;
export {
  M as default
};
//# sourceMappingURL=validation-messages.js.map