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, header tooltips, fixed rows, and different presentation styles.

Quick Installation

npm 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

<template>
  <TextInput v-model="text" placeholder="Enter text" icon="user" />
  <FileUpload v-model="files" accept="image/*" />
  <Action type="button" label="Click me" icon="check" />
  <Navigation :items="navigationItems" type="tiles" />
  <Dropdown v-model="selected" :options="options" />
  <Checkbox v-model="selected" :options="options" />
</template>

<script setup lang="ts">
import {
  TextInput,
  FileUpload,
  Action,
  Navigation,
  Dropdown,
  Checkbox,
} from '@a-vision-software/vue-input-components'
</script>

Styling

All components support custom styling through CSS variables and props:

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

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