vue-input-components

Vue Input Components

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

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.

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

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.

A flexible modal component with support for custom headers, footers, and icons. Features include large centered icons, custom styling, and smooth transitions.

Installation

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

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" />

  <!-- Modal Example -->
  <Action label="Open Modal" @click="showModal = true" />
  <Modal v-model="showModal" title="My Modal" icon="info-circle">
    <p>This is a modal example.</p>
  </Modal>
</template>

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

const showModal = ref(false)
</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);
  --modal-backdrop-color: rgba(0, 0, 0, 0.5);
  --modal-border-color: #e0e0e0;
}