@dialpad/dialtone/dist/vue2/common/mixins/input_group.cjs

Dialpad's Dialtone design system monorepo

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const Vue = require("vue");
const common_validators = require("../validators.cjs");
const common_utils = require("../utils.cjs");
const validation_messages = require("../../components/validation_messages/validation_messages.vue.cjs");
const InputGroupMixin = {
  components: { DtValidationMessages: validation_messages.default },
  // 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 common_utils.getUniqueString();
      }
    },
    /**
     * The value of the input group
     */
    value: {
      type: [String, Number, Boolean, Object],
      default: null
    },
    /**
     * The name of the input group
     */
    name: {
      type: String,
      required: true
    },
    /**
     * The legend of the input group
     */
    legend: {
      type: String,
      default: ""
    },
    /**
     * Disables the input group
     * @values true, false
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * Validation messages
     */
    messages: {
      type: Array,
      default: () => [],
      validator: (messages) => common_validators.validationMessageValidator(messages)
    },
    /**
     * Show validation messages
     * @values true, false
     */
    showMessages: {
      type: Boolean,
      default: true
    },
    /**
     * 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 formattedMessages = common_utils.formatMessages(this.messages);
    return {
      // wrap values in object to make reactive
      provideObj: {
        name: this.name,
        disabled: this.disabled,
        validationState: common_utils.getValidationState(formattedMessages)
      }
    };
  },
  computed: {
    formattedMessages() {
      return common_utils.formatMessages(this.messages);
    },
    validationState() {
      return common_utils.getValidationState(this.formattedMessages);
    }
  },
  watch: {
    disabled(newDisabled) {
      this.provideObj.disabled = newDisabled;
    },
    validationState(newValidationState) {
      this.provideObj.validationState = newValidationState;
    }
  },
  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(newValue) {
      this.internalValue = newValue;
      this.$emit("input", newValue);
    }
  },
  mounted() {
    if (!this.legend && !this.$slots.legend && !this.$attrs["aria-label"]) {
      Vue.util.warn("It is expected that an aria-label is provided when there is no legend.", this);
    }
  }
};
exports.InputGroupMixin = InputGroupMixin;
//# sourceMappingURL=input_group.cjs.map