inputs.js

Description

Mixin additional functionality for inputs fields.

API

Props

Name	Type	Description	Default
value	String	Sync value	required
placeholder	[String, null]	placeholder	null
disabled	Boolean	Is input disabled	false
error	[String, null]	Is error, error message	null
onFocus	Function	Callback on focus	() => {}
onBlur	Function	Callback on blur	() => {}

Events

Name	Description
focus	Emit on focus
blur	Emit on blur
input	Emit on input

@/src/mixins/inputs.js

export default {
  props: {
    value: {
      type: String,
      required: true,
    },
    placeholder: {
      type: [String, null],
      required: false,
      default: null,
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false,
    },
    error: {
      type: [String, null],
      required: false,
      default: null,
    },
    onFocus: {
      type: Function,
      required: false,
      default: () => [],
    },
    onBlur: {
      type: Function,
      required: false,
      default: () => [],
    },
  },

  data() {
    return {
      isFocus: false,
    };
  },

  methods: {
    onFocusEvent(event) {
      this.isFocus = true;
      this.$emit('focus');

      if (this.onFocus) {
        this.onFocus(event);
      }
    },

    onBlurEvent(event) {
      this.isFocus = false;
      this.$emit('blur');

      if (this.onBlur) {
        this.onBlur(event);
      }
    },

    onInputEvent() {
      this.$emit('input');
    },
  },
};