vue-textfield

vue-textfield

A Vue 3 text field component with dynamic validation using Yup, designed with modern UI/UX features.

Installation

Install the component via npm:

npm install vue-textfield

Usage

Import and Register

In your Vue 3 application, import and register the TextField component.

<template>
  <div id="app">
    <TextField
      v-model="textValue"
      type="text"
      label="Enter text"
      required
      minLength="3"
      maxLength="10"
      customError="Please enter valid text"
    />
    <TextField
      v-model="emailValue"
      type="email"
      label="Enter email"
      required
      customError="Please enter a valid email"
    />
    <TextField
      v-model="phoneValue"
      type="tel"
      label="Enter phone number"
      required
      minLength="10"
      maxLength="15"
      customError="Please enter a valid phone number"
    />
    <TextField
      v-model="dateValue"
      type="date"
      label="Enter date"
      required
      customError="Please enter a valid date"
    />
    <p>Text Value: {{ textValue }}</p>
    <p>Email Value: {{ emailValue }}</p>
    <p>Phone Value: {{ phoneValue }}</p>
    <p>Date Value: {{ dateValue }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';
import TextField from 'vue-textfield';

export default {
  name: 'App',
  components: {
    TextField
  },
  setup() {
    const textValue = ref('');
    const emailValue = ref('');
    const phoneValue = ref('');
    const dateValue = ref('');

    return {
      textValue,
      emailValue,
      phoneValue,
      dateValue
    };
  }
};
</script>

<style>
/* Add any necessary styles here */
</style>

Methods

The TextField component provides the following methods:

validate

You can call the validate method to manually trigger validation.

Example

<template>
  <div id="app">
    <TextField
      v-model="exampleValue"
      type="text"
      label="Example Input"
      required
      minLength="5"
      maxLength="15"
      customError="Invalid input"
    />
    <button @click="manualValidate">Validate Manually</button>
    <p>Example Value: {{ exampleValue }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';
import TextField from 'vue-textfield';

export default {
  name: 'App',
  components: {
    TextField
  },
  setup() {
    const exampleValue = ref(null);

    const manualValidate = () => {
      // Assuming validate method is exposed in TextField component
      this.$refs.exampleTextField.validate();
    };

    return {
      exampleValue,
      manualValidate
    };
  }
};
</script>

<style>
/* Add any necessary styles here */
</style>

Props

Prop	Type	Default	Description
modelValue	String, Number	undefined	The value of the input field.
type	String	"text"	The type of input field. Supports text, email, tel, date, and number.
customError	String	""	Custom error message to display when validation fails.
label	String	""	The label for the input field.
required	Boolean	false	Whether the field is required.
minLength	Number	0	Minimum length for the input value.
maxLength	Number	undefined	Maximum length for the input value.
requiredError	String	"This field is required"	Error message when the field is required but empty.
minValue	Number	0	Minimum value for numeric inputs.

Events

The TextField component emits the following events:

Event	Description
update:modelValue	Emitted when the value of the input changes.

License

Explanation

• Usage: Added a section to show how to import, register, and use the TextField component with various props.
• Props: Provided a detailed table of all the props supported by the TextField component, including their types, default values, and descriptions.
• Methods: Described the validate method and provided an example of how to manually trigger validation.
• Example: Included an example that demonstrates how to use the component and call its methods.
• Events: Listed the events emitted by the TextField component.
• License: Mentioned the license under which the package is released.

By following this structure, users will have a comprehensive guide on how to use your vue-textfield package effectively.