Vue Input Components

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

Features

TextInput Component

• Customizable label position (top, left, right, bottom)
• 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

Development

npm run dev

Build

npm run build

Installation in Other Projects

Option 1: Copy Components Directly

1. Copy the following files to your project:

   • src/components/TextInput.vue
   • src/components/FileUpload.vue
   • src/assets/colors.css

2. Install required dependencies in your project:

   npm install @fortawesome/fontawesome-svg-core @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome

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

   @import './assets/colors.css';

4. Import and register Font Awesome in your main.js or main.ts:

   import { library } from '@fortawesome/fontawesome-svg-core'
   import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
   import { faUser, faUpload, faImage, faFile, faHome } from '@fortawesome/free-solid-svg-icons'
   
   library.add(faUser, faUpload, faImage, faFile, faHome)
   app.component('font-awesome-icon', FontAwesomeIcon)

Option 2: Create a Package

1. Create a new package.json with the following structure:

   {
     "name": "vue-input-components",
     "version": "1.0.0",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "files": ["dist"],
     "dependencies": {
       "@fortawesome/fontawesome-svg-core": "^6.7.2",
       "@fortawesome/free-regular-svg-icons": "^6.7.2",
       "@fortawesome/free-solid-svg-icons": "^6.7.2",
       "@fortawesome/vue-fontawesome": "^3.0.8",
       "vue": "^3.5.13"
     },
     "peerDependencies": {
       "vue": "^3.5.13"
     }
   }

2. Build the components for distribution:

   npm run build

3. Publish to npm:

   npm publish

4. Install in other projects:

   npm install vue-input-components

Usage in Other Projects

1. Import the components:

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

2. 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>

3. Import the color variables in your project's main CSS file:

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

Customization

1. Override color variables in your project:

   :root {
     --primary-color: #your-color;
     --text-color: #your-color;
     /* Override other variables as needed */
   }

2. Customize component styles:

   .text-input {
     /* Your custom styles */
   }
   
   .file-upload {
     /* Your custom styles */
   }

Requirements

• Vue 3.x
• TypeScript (optional but recommended)
• Font Awesome (for icons)

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)

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 '@/components/TextInput.vue'

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 '@/components/TextInput.vue'

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 '@/components/FileUpload.vue'

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 '@/components/FileUpload.vue'

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;

  /* 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);
}

License

MIT