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"
      appendIcon="account"
    />
    <TextField
      v-model="emailValue"
      type="email"
      label="Enter email"
      required
      customError="Please enter a valid email"
      prePendInnerIcon="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"
      min="2024-07-01"
      max="2024-09-01"
    />
      <TextField 
       v-model="selctedtValue"
       @input="SelectValue"
       type="password"
       label="Enter Password"
       :showPassword="true"  
       />
    <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>

#Customization

/* Example CSS */
.textfield-container {
  /* Your styles here */
}
.textfield-inner-container {
  /* Your styles here */
}
.input-error {
  border-color: red;
}
.labelError {
  color: red;
}
.icon-container, .after-icon-container {
  /* Your styles here */
}

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 Name	Type	Default	Description
modelValue	String, Number	''	The value of the input field.
type	String	'text'	The type of the input field (text, email, tel, number, password, date).
customError	String	''	Custom error message.
label	String	''	The label for the input field.
required	Boolean	false	Whether the input field is required.
minLength	Number	0	Minimum length for the input field.
maxLength	Number	null	Maximum length for the input field.
requiredError	String	'This field is required'	Error message for the required validation.
minValue	Number	0	Minimum value for the input field.
placeholder	String	''	Placeholder text for the input field.
prePendInnerIcon	String, Object	null	Icon to display inside the input field, before the text.
appendIcon	String, Object	null	Icon to display inside the input field, after the text.
showPassword	Boolean	false	Toggle to show/hide password.
min	Number	null	Minimum value for number and date input fields.
max	Number	null	Maximum value for number and date input fields.

Events

The TextField component emits the following events:

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

License

Make sure to replace vue-textfield with the actual name of your npm package. This README file covers the basic usage, props, events, and customization options for your Vue 3 text field component.

Explanation

• Table Structure: A table is used to display the props in a clear, organized manner.
• Prop Columns: 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.