Vue Input Components

A collection of reusable Vue 3 input components with TypeScript support, designed for modern web applications.

Features

• 🚀 Built with Vue 3 and TypeScript
• 🎨 Customizable styling with CSS variables
• 📦 Tree-shakeable components
• 🎯 Fully typed with TypeScript
• 🎨 Beautiful and consistent design
• 🔍 Accessible by default
• 📱 Responsive and mobile-friendly

Installation

npm install @a-vision-software/vue-input-components

Usage

Import Styles

import '@a-vision-software/vue-input-components/styles.css'

Import Components

import { TextInput, FileUpload, Action } from '@a-vision-software/vue-input-components'

Components

TextInput

A versatile text input component with validation and error handling.

<template>
  <TextInput
    v-model="value"
    label="Username"
    placeholder="Enter your username"
    :error="error"
    :disabled="false"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { TextInput } from '@a-vision-software/vue-input-components'

const value = ref('')
const error = ref('')
</script>

Props

FileUpload

A file upload component with drag-and-drop support and file type validation.

<template>
  <FileUpload
    v-model="files"
    accept="image/*"
    :multiple="true"
    :max-size="5 * 1024 * 1024"
    @error="handleError"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { FileUpload } from '@a-vision-software/vue-input-components'

const files = ref<File[]>([])

const handleError = (error: string) => {
  console.error(error)
}
</script>

Props

Action

A versatile action component that can be used as a button or link with customizable colors and icons.

<template>
  <Action icon="save" label="Save Changes" :color="'#4CAF50'" @click="handleSave" />
</template>

<script setup lang="ts">
import { Action } from '@a-vision-software/vue-input-components'

const handleSave = () => {
  console.log('Saving changes...')
}
</script>

Props

Styling

The components use CSS variables for easy customization. You can override these variables in your application:

:root {
  --primary-color: #4caf50;
  --text-primary: #333;
  --text-secondary: #666;
  --border-color: #ddd;
  --input-bg: #fff;
  --error-color: #f44336;
}

Development

Setup

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Run tests
npm run test

License

MIT © A-Vision Software