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

Vue component library for Dialpad's design system Dialtone

import i from "vue";
import { VALIDATION_MESSAGE_TYPES as r } from "../constants/index.js";
import { validationMessageValidator as n } from "../validators/index.js";
import { formatMessages as l } from "../utils/index.js";
const s = {
  inheritAttrs: !1,
  props: {
    /**
     * A provided label for the input
     */
    label: {
      type: String,
      default: ""
    },
    /**
     * The name of the input
     */
    name: {
      type: String,
      default: ""
    },
    /**
     * The value of the input
     * @model value
     */
    value: {
      type: [String, Number, Boolean, Object],
      default: null
    },
    /**
     * Describes the input
     */
    description: {
      type: String,
      default: ""
    },
    /**
     * Disables the input
     */
    disabled: {
      type: Boolean,
      default: !1
    },
    /**
     * The validation state of the input
     */
    validationState: {
      type: String,
      default: "",
      validator: (e) => e ? Object.values(r).includes(e) : !0
    },
    /**
     * Used to customize the input element
     */
    inputClass: {
      type: [String, Array, Object],
      default: ""
    },
    /**
     * Used to customize the label container
     */
    labelClass: {
      type: [String, Array, Object],
      default: ""
    },
    /**
     * Used to customize the description container
     */
    descriptionClass: {
      type: [String, Array, Object],
      default: ""
    },
    /**
     * A set of props that are passed into the label container
     */
    labelChildProps: {
      type: Object,
      default: () => ({})
    },
    /**
     * A set of props that are passed into the description container
     */
    descriptionChildProps: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      internalDisabled: this.disabled,
      internalValidationState: this.validationState
    };
  },
  watch: {
    disabled(e) {
      this.internalDisabled = e;
    },
    validationState(e) {
      this.internalValidationState = e;
    }
  },
  methods: {
    /**
     * @param {Boolean | String} hasLabelOrLabel either a boolean indicating the label exists or the label itself
     * @param {String} ariaLabel the aria-label passed (null/undefined if it's not passed)
     */
    validateInputLabels(e, t) {
      !e && !t && i.util.warn(
        "You must provide an aria-label when there is no label passed",
        this
      );
    }
  }
}, o = {
  model: {
    prop: "checked"
  },
  props: {
    /**
     * Used to set the state of the checkable input
     * @model checked
     */
    checked: {
      type: Boolean,
      default: !1
    },
    /**
     * Indeterminate State, toggling indeterminate checkbox will uncheck
     */
    indeterminate: {
      type: Boolean,
      default: !1
    },
    /**
     * The value of the input
     */
    value: {
      type: [String, Number, Boolean],
      default: null
    }
  },
  data() {
    return {
      internalChecked: this.checked,
      internalIndeterminate: this.indeterminate
    };
  },
  watch: {
    checked(e) {
      this.internalChecked = e;
    },
    indeterminate(e) {
      this.internalIndeterminate = e;
    }
  }
}, u = {
  inject: {
    // Object used to pass data from the group
    groupContext: {
      default: {}
    },
    // Method used to update the group value
    setGroupValue: {
      default: () => () => {
      }
    }
  },
  data() {
    return {
      internalValue: this.value
    };
  },
  computed: {
    hasGroup() {
      return Object.prototype.hasOwnProperty.call(this.groupContext, "name");
    },
    groupName() {
      var e;
      return ((e = this.groupContext) == null ? void 0 : e.name) ?? "";
    },
    groupValue() {
      var e;
      return (e = this.groupContext) == null ? void 0 : e.value;
    },
    groupDisabled() {
      var e;
      return ((e = this.groupContext) == null ? void 0 : e.disabled) ?? !1;
    },
    groupValidationState() {
      var e;
      return ((e = this.groupContext) == null ? void 0 : e.validationState) ?? null;
    },
    internalName() {
      return this.name || this.groupName;
    }
  },
  watch: {
    value(e) {
      this.internalValue = e;
    },
    groupValue: {
      immediate: !0,
      handler(e) {
        this.hasGroup && (this.internalValue = e);
      }
    },
    groupDisabled: {
      immediate: !0,
      handler(e) {
        this.hasGroup && (this.internalDisabled = this.disabled || e);
      }
    },
    groupValidationState: {
      immediate: !0,
      handler(e) {
        this.hasGroup && (this.internalValidationState = e || this.validationState);
      }
    }
  },
  created() {
    var a;
    const e = Object.prototype.hasOwnProperty.call(this.groupContext, "name"), t = (a = this.groupContext) == null ? void 0 : a.name;
    this.name && e && t !== this.name && i.util.warn(
      `Component is being used inside a Group. Did you mean to override the name prop value (${t}) with (${this.name})? It is recommended to only set name at the Group level.`,
      this
    );
  }
}, d = {
  props: {
    /**
     * Used to customize the validation messages component
     */
    messagesClass: {
      type: [String, Array, Object],
      default: ""
    },
    /**
     * A set of props that are passed into the validation messages component
     */
    messagesChildProps: {
      type: Object,
      default: () => ({})
    },
    /**
     * Used to hide / show the validation messages
     * @values true, false
     */
    showMessages: {
      type: Boolean,
      default: !0
    },
    /**
     * Validation messages
     */
    messages: {
      type: Array,
      default: () => [],
      validator: (e) => n(e)
    }
  },
  computed: {
    formattedMessages() {
      return l(this.messages);
    }
  }
}, f = {
  InputMixin: s,
  CheckableMixin: o,
  GroupableMixin: u,
  MessagesMixin: d
};
export {
  o as CheckableMixin,
  u as GroupableMixin,
  s as InputMixin,
  d as MessagesMixin,
  f as default
};
//# sourceMappingURL=input.js.map