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

<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

<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>

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.