@dialpad/dialtone-vue/dist/common/mixins/input-group.js

Vue component library for Dialpad's design system Dialtone

import s from "vue";
import { validationMessageValidator as i } from "../validators/index.js";
import { getValidationState as t, formatMessages as a, getUniqueString as r } from "../utils/index.js";
import d from "../../lib/validation-messages/validation-messages.js";
const o = {
  components: { DtValidationMessages: d },
  // provide data to slotted components
  provide() {
    return {
      groupContext: this.provideObj,
      setGroupValue: this.setGroupValue
    };
  },
  props: {
    /**
     * The id of the input group
     */
    id: {
      type: String,
      default() {
        return r();
      }
    },
    /**
     * The value of the input group
     */
    value: {
      type: [String, Number, Boolean, Object],
      default: null
    },
    /**
     * The name of the input group
     */
    name: {
      type: String,
      required: !0
    },
    /**
     * The legend of the input group
     */
    legend: {
      type: String,
      default: ""
    },
    /**
     * Disables the input group
     * @values true, false
     */
    disabled: {
      type: Boolean,
      default: !1
    },
    /**
     * Validation messages
     */
    messages: {
      type: Array,
      default: () => [],
      validator: (e) => i(e)
    },
    /**
     * Show validation messages
     * @values true, false
     */
    showMessages: {
      type: Boolean,
      default: !0
    },
    /**
     * Used to customize the legend element
     */
    legendClass: {
      type: [String, Array, Object],
      default: ""
    },
    /**
     * Used to customize the messages container
     */
    messagesClass: {
      type: [String, Array, Object],
      default: ""
    },
    /**
     * A set of props that are passed into the legend element
     */
    legendChildProps: {
      type: Object,
      default: () => ({})
    },
    /**
     * A set of props that are passed into the messages container
     */
    messagesChildProps: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    const e = a(this.messages);
    return {
      // wrap values in object to make reactive
      provideObj: {
        name: this.name,
        disabled: this.disabled,
        validationState: t(e)
      }
    };
  },
  computed: {
    formattedMessages() {
      return a(this.messages);
    },
    validationState() {
      return t(this.formattedMessages);
    }
  },
  watch: {
    disabled(e) {
      this.provideObj.disabled = e;
    },
    validationState(e) {
      this.provideObj.validationState = e;
    }
  },
  methods: {
    /*
     * provided value to support 2 way binding for slotted input components.
     * slotted input components will change this value and need to emit new value up.
     */
    setGroupValue(e) {
      this.internalValue = e, this.$emit("input", e);
    }
  },
  mounted() {
    !this.legend && !this.$slots.legend && !this.$attrs["aria-label"] && s.util.warn("It is expected that an aria-label is provided when there is no legend.", this);
  }
}, g = {
  InputGroupMixin: o
};
export {
  o as InputGroupMixin,
  g as default
};
//# sourceMappingURL=input-group.js.map