Vue Dynamic Input Component

A Vue component library for building interactive UI elements.

License

This project is licensed under the MIT License.

Probs

• modelValue (required): The v-model binding for the input value.
• type: The type of the input field (e.g., "text", "number", "password").
• placeholder: The placeholder text for the input field.
• background-color: The background color of the input field.
• border-radius: The border radius of the input field.
• color: The text color of the input field.
• border-color: The border color of the input field.
• min-length: The minimum length of the input value.
• max-length: The maximum length of the input value.
• pattern: A regular expression pattern for input validation.
• width: Width of design input.
• height: Height of design input
• min-width: Min width of design input
• max-width: Max width of design input
• min-height: Min height of design input
• max-height: Max height of design input

Installation

npm i vue-dynamic-input-component

or

yarn add vue-dynamic-input-component

Usage

import {VInput} from 'vue-dynamic-input-component' <br>
import 'vue-dynamic-input-component/dist/style.css';

Props

The following table describes the props that can be passed to the component for customization:

Prop	Type	Description
modelValue	String/Number	The v-model binding for the input value.
typeValue	String	The type of the input field. Possible values: "string", "number", "password".
placeValue	String	The placeholder text for the input field.
backgroundColor	String	The background color of the input field.
borderRadius	String	The border radius of the input field.
color	String	The text color of the input field.
borderColor	String	The border color of the input field.
focusBorderColor	String	The border color of the input field when it is focused.
focusBackgroundColor	String	The background color of the input field when it is focused.
minLength	String	The minimum length of the input value.
maxLength	String	The maximum length of the input value.
pattern	String	A regular expression pattern for input validation.
minWidth	String	The minimum width of the input field.
maxWidth	String	The maximum width of the input field.
width	String	The width of the input field.
height	String	The height of the input field.
minHeight	String	The minimum height of the input field.
maxHeight	String	The maximum height of the input field.

Example

<template>
  <VInput
    v-model="inputValue"
    typeValue="text"
    placeValue="Enter your name"
    backgroundColor="#f2f2f2"
    borderRadius="5px"
    color="#333"
    borderColor="#ccc"
    focusBorderColor="red"
    focusBackgroundColor="#fff"
    minLength="2"
    maxLength="20"
    pattern="[a-zA-Z]+"
    minWidth="200px"
    maxWidth="500px"
    width="100%"
    height="40px"
    minHeight="40px"
    maxHeight="60px"
  ></VInput>
</template>

<script>
import { VInput } from 'vue-dynamic-input-component';
## Props

License

This project is licensed under the MIT License.

---

_{Built with ❤️ by Volkan Filazi
https://github.com/volkanfilazi
https://www.volkanfilazi.at/}