FormGroupTextField.vue

<template>
  <div class="form-group mt-3">
    <label class="form-check-label" :for="id">
      <span v-if="required">* </span>{{ label }}
    </label>
    <span v-if="showMaxChars" class="float-end">{{ charLabel }}</span>
    <input
      class="form-control"
      type="text"
      :id="id"
      :required="required"
      :value="modelValue"
      :disabled="readonly"
      :maxlength="maxChars"
      @input="$emit('update:model-value', $event.target.value)"
    />
  </div>
</template>
<script>
/**
 * A bootstrap styled text input component with a label
 */
export default {
  name: "FormGroupTextField",
  props: {
    label: String,
    id: String,
    modelValue: String,
    required: { type: Boolean, default: false },
    readonly: { type: Boolean, default: false },
    maxChars: { type: Number, default: -1 },
  },
  computed: {
    showMaxChars: function() {
      return this.maxChars >= 0;
    },
    charCount: function() {
      if (this.modelValue) return this.modelValue.trim().length;
      else return 0;
    },
    charLabel: function() {
      return this.charCount + "/" + this.maxChars;
    },
  },
  setup() {},
};
</script>