zdna-form.vue

<template>
  <div class="row">
    <div class="col-md-12">
      <div class="form-group row">
        <label class="col-md-4 col-form-label">Minimal sequence size</label>
        <div class="col-md-8">
          <input
              type="number"
              class="form-control"
              step="1"
              min="10"
              max="100"
              v-model="minSequenceSize"
              @input="updateValue($event.target.value, 'minSequenceSize')"
          />
        </div>
      </div>
      <p v-if="minSequenceSize > 20" class="alert alert-warning">
        Minimal sequence size recommended value is between 10 and 20.
      </p>
      <div class="form-group row">
        <label class="col-md-4 col-form-label">Threshold</label>
        <div class="col-md-8">
          <input
              type="number"
              class="form-control"
              step="0.1"
              min="0.1"
              max="4"
              v-model="threshold"
              @input="updateValue($event.target.value, 'threshold')"
          />
        </div>
      </div>

      <div class="alert alert-danger" v-if="$v.$anyError">
        <div v-if="!$v.minSequenceSize.required">Minimal sequence size is required.</div>
        <div v-if="!$v.minSequenceSize.numeric">Minimal sequence size must be numeric.</div>
        <div v-if="!$v.minSequenceSize.minValue">Minimal length of sequence is {{ $v.minSequenceSize.$params.minValue.min }}.</div>
        <div v-if="!$v.threshold.required">Threshold is required.</div>
        <div v-if="!$v.threshold.decimal">Threshold must be decimal number.</div>
        <div v-if="!$v.threshold.minValue">Minimal value of threshold is {{ $v.threshold.$params.minValue.min }}.</div>
      </div>

      <div class="text-right">
        <slot name="additionalButtons"></slot>
      </div>
    </div>
  </div>
</template>

<script>
import { required, numeric, minValue, decimal } from 'vuelidate/lib/validators'

export default {
  props: {
    minSequenceSize: {
      type: Number,
      default: 10 
    },
    threshold: {
      type: Number,
      default: 0.0 
    }
  },
  validations: {
    minSequenceSize: {
      required,
      numeric,
      minValue: minValue(10)
    },
    threshold: {
      required,
      decimal,
      minValue: minValue(0)
    },

  },
  methods: {
    updateValue: function(value, type) {
      this[type] = value; // Aktualizácia lokálnej hodnoty
      this.$v[type].$touch(); // Aktivuje validáciu
      this.$emit('checkModel', value, type)
    },
  },
}
</script>