Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/vreg/components/Forms/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <ValidationProvider v-slot="{errors}" :rules="rules" :name="vName || field">
    <div class="form-group with-animation" :class="formGroupClasses">

      <slot>
        <p class="placeholder-text" :class="{'required':isRequired}">{{ placeholder }}</p>
        <input :type="type" :class="{'with-border':addWithBorderClass}" class="form-control"
               v-model="form[field]"
               :disabled="$attrs['disabled']"
               :name="vName || field"/>
      </slot>

      <span class="validation-err-msg"
            v-if="!errorMsgsOutOfWrapper"
            v-for="err in $getFormInputErrors(errors,field,form)"
            v-html="err">  </span>
    </div>


    <span class="validation-err-msg"
          v-if="errorMsgsOutOfWrapper"
          v-for="err in $getFormInputErrors(errors,field,form)"
          v-html="err">  </span>

  </ValidationProvider>
</template>

<script>
export default {
  name: "input-field",
  props: {
    vName: {
      required: false,
    },
    type: {
      required: false,
      default: 'text'
    },
    rules: {
      required: false,
      type: String,
      default: ''
    },
    formGroupClass: {
      require: false,
      default: ''
    },
    form: {
      required: true
    },
    field: {
      required: true,
      type: String
    },
    placeholder: {
      required: false,
      default: ''
    },
    errorMsgsOutOfWrapper: {
      required: false,
      default: false
    }
  },
  data() {
    return {
      addWithBorderClass: false,
      formGroupClasses: []
    }
  },
  mounted() {

    this.formGroupClass.split(' ').forEach(c => {
      if (c.trim()) {
        this.formGroupClasses.push({[c]: true});
      }
    });

    this.focusOnInputIfValue();

  },
  methods: {
    focusOnInputIfValue() {

      if (!this.fieldValue) {
        return;
      }

      let hasFocusedClass = this.formGroupClasses.find(c => {
        if (c['focused']) {
          return c;
        }
      });

      if (hasFocusedClass) {
        return;
      }

      this.formGroupClasses.push({
        'focused': true
      });
    },

  },
  computed: {
    isRequired() {
      return this.rules.indexOf('required') >= 0;
    },
    fieldValue() {
      return this.field.split('.').reduce((o, f) => o[f], this.form);
    }
  },
  watch: {
    fieldValue() {
      this.focusOnInputIfValue();
    }
  }
}
</script>

<style scoped>
.form-control:disabled {
  background-color: unset !important;
}
</style>