Vue Input Components

A collection of reusable Vue 3 input components with TypeScript support.

Features

TextInput Component

• Customizable label position (top, left)
• Label alignment options (left, right, center)
• Icon support with click-to-focus functionality
• Error and success states with messages
• Required field indicator
• Autosave functionality with debounce
• Change indicators (saved, changed)
• Fully responsive
• Accessible
• TypeScript support
• Multiline text input support (textarea)
• Adjustable number of visible rows
• Optional maximum length limit
• Vertical resizing support

FileUpload Component

• Drag and drop file upload
• File size validation (20MB limit)
• Multiple file selection
• Progress bar for upload status
• Customizable icons
• Automatic or manual upload modes
• File list display with sizes
• Error handling and status messages

Installation

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

Quick Start

1. Import the components in your Vue application:

   <script setup>
   import { TextInput, FileUpload } from '@a-vision-software/vue-input-components'
   </script>

2. Import the color variables in your main CSS file:

   @import '@a-vision-software/vue-input-components/dist/colors.css';

3. Use the components in your template:

   <template>
     <TextInput v-model="username" label="Username" icon="user" :required="true" />
   
     <FileUpload
       icon="upload"
       upload-url="https://api.example.com/upload"
       @upload-complete="handleUploadComplete"
     />
   </template>

Development

npm run dev

Build

npm run build

Components

TextInput

Basic text input component with advanced features, including textarea support.

Props

Events

Examples

Basic Text Input

<template>
  <TextInput
    v-model="username"
    label="Username"
    type="text"
    icon="user"
    placeholder="Enter your username"
    :error="usernameError"
    :autosave="handleUsernameAutosave"
    label-position="top"
    label-align="left"
    required
  />
</template>

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

const username = ref('')
const usernameError = ref('')

const handleUsernameAutosave = async (value: string) => {
  // Your autosave logic here
}
</script>

Textarea Input

<template>
  <TextInput
    v-model="description"
    label="Description"
    icon="pen"
    placeholder="Enter a detailed description"
    :isTextarea="true"
    :error="descriptionError"
    :autosave="handleDescriptionAutosave"
    label-position="top"
    label-align="left"
    required
  />
</template>

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

const description = ref('')
const descriptionError = ref('')

const handleDescriptionAutosave = async (value: string) => {
  // Your autosave logic here
}
</script>

FileUpload

Flexible file upload component with drag and drop support.

Props

Events

Examples

Automatic Upload Mode

<template>
  <FileUpload
    icon="upload"
    upload-url="https://api.example.com/upload"
    @upload-complete="handleUploadComplete"
    @upload-error="handleUploadError"
  />
</template>

<script setup>
import { FileUpload } from '@a-vision-software/vue-input-components'

const handleUploadComplete = (files) => {
  console.log('Uploaded files:', files)
}

const handleUploadError = (error) => {
  console.error('Upload error:', error)
}
</script>

Manual Upload Mode

<template>
  <FileUpload
    icon="image"
    @files-selected="handleFilesSelected"
    @start-upload="handleStartUpload"
  />
</template>

<script setup>
import { FileUpload } from '@a-vision-software/vue-input-components'

const handleFilesSelected = (files) => {
  console.log('Selected files:', files)
}

const handleStartUpload = (files) => {
  // Implement your custom upload logic here
  console.log('Starting upload for:', files)
}
</script>

Styling

All components use CSS variables for theming. You can customize the colors by overriding these variables in your application's CSS:

:root {
  /* Base colors */
  --primary-color: #3498db;
  --primary-color-light: rgba(52, 152, 219, 0.2);
  --secondary-color: #2ecc71;

  /* Text colors */
  --text-color: #2c3e50;
  --text-color-light: #7f8c8d;

  /* UI colors */
  --border-color: #dcdfe6;
  --icon-color: #95a5a6;

  /* State colors */
  --error-color: #e74c3c;
  --error-color-light: rgba(231, 76, 60, 0.2);
  --success-color: #2ecc71;
  --success-color-light: rgba(46, 204, 113, 0.2);
  --warning-color: #f1c40f;
  --warning-color-light: rgba(241, 196, 15, 0.2);

  /* Background colors */
  --disabled-color: #bdc3c7;
  --disabled-background: #f5f7fa;
  --card-bg: #ffffff;
  --background-color: #f8f9fa;

  /* Input colors */
  --input-bg-color: rgba(255, 255, 255, 0.8);
  --input-bg-hover: rgba(0, 0, 0, 0.05);
  --input-bg-disabled: rgba(0, 0, 0, 0.05);

  /* File Upload specific colors */
  --upload-border-color: var(--border-color);
  --upload-bg-color: var(--background-color);
  --upload-dragging-border-color: var(--primary-color);
  --upload-dragging-bg-color: var(--primary-color-light);
  --upload-has-files-border-color: var(--success-color);
  --upload-has-files-bg-color: var(--success-color-light);
  --upload-icon-color: var(--icon-color);
  --upload-text-color: var(--text-color-light);
  --progress-bg-color: var(--disabled-background);
  --progress-color: var(--primary-color);
}

Browser Support

All components use modern browser features and should work in all modern browsers that support:

• CSS Variables
• Flexbox
• File API (for FileUpload)
• Drag and Drop API (for FileUpload)
• FormData (for FileUpload)
• XMLHttpRequest (for FileUpload)

License

MIT