Vue Input Components

A collection of reusable Vue 3 input components with consistent styling and behavior.

Documentation

For detailed documentation, please visit our documentation site.

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

Components

Text Input

A versatile text input component that supports icons, validation, and custom styling.

File Upload

A file upload component with drag and drop support, file validation, and preview capabilities.

Action

A flexible action component that can be used as a button, link, or icon button with various styles.

Navigation

A navigation component with multiple styles, icons support, and responsive design.

Dropdown

A dropdown component that supports single/multiple selection, filtering, and custom styling.

Checkbox

A checkbox component with support for single/multiple selection and various presentation modes.

List

A flexible and customizable list component that supports sorting, filtering, and different presentation styles.

Quick Installation

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

Declare global types

Add the global types to your tsconfig.app.json

{
  ...
 "compilerOptions": {
    ...
    "types": ["@a-vision-software/vue-input-components/global"],
  }
}

Quick Start

1<template>
2  <TextInput v-model="text" placeholder="Enter text" icon="user" />
3  <FileUpload v-model="files" accept="image/*" />
4  <Action type="button" label="Click me" icon="check" />
5  <Navigation :items="navigationItems" type="tiles" />
6  <Dropdown v-model="selected" :options="options" />
7  <Checkbox v-model="selected" :options="options" />
8</template>
9
10<script setup lang="ts">
11import {
12  TextInput,
13  FileUpload,
14  Action,
15  Navigation,
16  Dropdown,
17  Checkbox,
18} from '@a-vision-software/vue-input-components'
19</script>

Styling

All components support custom styling through CSS variables and props:

1:root {
2  --primary: #4a90e2;
3  --text-primary: rgba(0, 0, 0, 0.8);
4  --text-secondary: rgba(0, 0, 0, 0.6);
5  --text-disabled: rgba(0, 0, 0, 0.4);
6}

Development

Setup

1# Install dependencies
2npm install
3
4# Start development server
5npm run dev
6
7# Build for production
8npm run build
9
10# Run tests
11npm run test

License

MIT