vue-textfield-component

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

Usage

<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-component';

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

<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-component';

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

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-component package effectively.