opnform/resources/js/components/forms/TextInput.vue

<template>
  <input-wrapper
    v-bind="$props"
  >
    <template #label>
      <slot name="label" />
    </template>

    <input :id="id?id:name" v-model="compVal" :disabled="disabled"
           :type="nativeType"
           :pattern="pattern"
           :style="inputStyle"
           :class="[theme.default.input, { '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200': disabled }]"
           :name="name" :accept="accept"
           :placeholder="placeholder" :min="min" :max="max" :maxlength="maxCharLimit"
           @change="onChange" @keydown.enter.prevent="onEnterPress"
    >

    <template v-if="maxCharLimit && showCharLimit" #bottom_after_help>
      <small :class="theme.default.help">
      {{ charCount }}/{{ maxCharLimit }}
      </small>
    </template>

    <template #error>
      <slot name="error" />
    </template>
  </input-wrapper>
</template>

<script>
import { inputProps, useFormInput } from './useFormInput.js'
import InputWrapper from './components/InputWrapper.vue'

export default {
  name: 'TextInput',
  components: { InputWrapper },

  props: {
    ...inputProps,
    nativeType: { type: String, default: 'text' },
    accept: { type: String, default: null },
    min: { type: Number, required: false, default: null },
    max: { type: Number, required: false, default: null },
    maxCharLimit: { type: Number, required: false, default: null },
    showCharLimit: { type: Boolean, required: false, default: false },
    pattern: { type: String, default: null }
  },

  setup (props, context) {
    const {
      compVal,
      inputStyle,
      hasValidation,
      hasError
    } = useFormInput(props, context, props.nativeType === 'file' ? 'file-' : null)

    const onChange = (event) => {
      if (props.nativeType !== 'file') return

      const file = event.target.files[0]
      // eslint-disable-next-line vue/no-mutating-props
      props.form[props.name] = file
    }

    const onEnterPress = (event) => {
      event.preventDefault()
      return false
    }

    return {
      compVal,
      inputStyle,
      hasValidation,
      hasError
    }
  },
  computed: {
    charCount () {
      return (this.compVal) ? this.compVal.length : 0
    }
  }
}
</script>