@a-vision-software/vue-input-components 1.1.30 → 1.1.32

package/package.json

@@ -1,10 +1,32 @@
 {
   "name": "@a-vision-software/vue-input-components",
-  "version": "1.1.30",
+  "version": "1.1.32",
   "description": "A collection of reusable Vue 3 input components with TypeScript support",
+  "author": "A-Vision Software",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/a-vision-software/vue-input-components"
+  },
+  "bugs": {
+    "url": "https://github.com/a-vision-software/vue-input-components/issues"
+  },
+  "homepage": "https://github.com/a-vision-software/vue-input-components#readme",
+  "keywords": [
+    "vue",
+    "vue3",
+    "components",
+    "input",
+    "form",
+    "typescript",
+    "file-upload",
+    "text-input",
+    "textarea"
+  ],
   "type": "module",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "main": "./dist/vue-input-components.umd.js",
   "module": "./dist/vue-input-components.es.js",
@@ -23,50 +45,46 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "run-p type-check \"build-only {@}\" --",
-    "preview": "vite preview",
+    "build": "npm run type-check && npm run build-only",
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit",
-    "lint": "eslint . --fix",
-    "format": "prettier --write src/"
-  },
-  "keywords": [
-    "vue",
-    "vue3",
-    "components",
-    "input",
-    "form",
-    "typescript"
-  ],
-  "author": "",
-  "license": "MIT",
-  "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"
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,vue,css}\"",
+    "test": "vitest",
+    "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
-    "vue": "^3.5.13"
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.0",
+    "@fortawesome/free-regular-svg-icons": "^6.7.0",
+    "@fortawesome/free-solid-svg-icons": "^6.7.0",
+    "@fortawesome/vue-fontawesome": "^3.0.0"
   },
   "devDependencies": {
-    "@tsconfig/node22": "^22.0.1",
-    "@types/node": "^22.14.0",
-    "@vitejs/plugin-vue": "^5.2.3",
-    "@vue/eslint-config-prettier": "^10.2.0",
-    "@vue/eslint-config-typescript": "^14.5.0",
-    "@vue/tsconfig": "^0.7.0",
-    "eslint": "^9.22.0",
-    "eslint-plugin-vue": "~10.0.0",
-    "jiti": "^2.4.2",
-    "npm-run-all2": "^7.0.2",
-    "prettier": "3.5.3",
-    "typescript": "~5.8.0",
-    "vite": "^6.2.4",
-    "vite-plugin-dts": "^4.5.3",
-    "vite-plugin-vue-devtools": "^7.7.2",
-    "vue-router": "^4.5.0",
-    "vue-tsc": "^2.2.8"
+    "@tsconfig/node20": "^20.1.2",
+    "@types/node": "^20.11.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/test-utils": "^2.4.0",
+    "@vue/tsconfig": "^0.5.1",
+    "eslint": "^8.56.0",
+    "eslint-plugin-vue": "^9.21.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.2.0",
+    "typescript": "~5.3.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.7.0",
+    "vitest": "^1.2.0",
+    "vue-router": "^4.2.0",
+    "vue-tsc": "^1.8.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

package/src/App.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+</script>
+
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family:
+    'Inter',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#app {
+  min-height: 100vh;
+  width: 100vw;
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr;
+}
+</style>

package/src/assets/colors.css

@@ -0,0 +1,67 @@
+: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);
+
+  /* Text Colors */
+  --text-muted: #6c757d;
+
+  /* Border Colors */
+  --input-bg: #ffffff;
+  --input-bg-disabled: #e9ecef;
+
+  /* Status Colors */
+  --danger-color: #dc3545;
+  --success-color: #28a745;
+  --warning-color: #ffc107;
+
+  /* Shadow Colors */
+  --shadow-color: rgba(74, 108, 247, 0.25);
+
+  /* Typography */
+  --line-height: 20px;
+
+  /* File Upload 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);
+  --success-bg-color: var(--success-color-light);
+  --success-text-color: var(--success-color);
+  --error-bg-color: var(--error-color-light);
+  --error-text-color: var(--error-color);
+}

package/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

package/src/assets/main.css

@@ -0,0 +1,160 @@
+:root {
+  /* Typography */
+  --font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 600;
+  --line-height-tight: 1.25;
+  --line-height-base: 1.5;
+  --line-height-loose: 1.75;
+
+  /* Spacing */
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+
+  /* Borders */
+  --border-radius-sm: 0.25rem;
+  --border-radius-md: 0.375rem;
+  --border-radius-lg: 0.5rem;
+  --border-width: 1px;
+  --border-width-thick: 2px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);
+
+  /* Transitions */
+  --transition-fast: 150ms;
+  --transition-base: 200ms;
+  --transition-slow: 300ms;
+  --transition-timing: ease-in-out;
+}
+
+/* Base styles */
+html {
+  box-sizing: border-box;
+  font-size: 16px;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  color: var(--text-color);
+  background-color: var(--background-color);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-tight);
+  color: var(--text-color);
+}
+
+p {
+  margin: 0 0 var(--spacing-md) 0;
+}
+
+a {
+  color: var(--primary-color);
+  text-decoration: none;
+  transition: color var(--transition-base) var(--transition-timing);
+}
+
+a:hover {
+  color: var(--primary-color-light);
+}
+
+/* Utility classes */
+.text-error {
+  color: var(--error-color);
+}
+
+.text-success {
+  color: var(--success-color);
+}
+
+.text-warning {
+  color: var(--warning-color);
+}
+
+.text-disabled {
+  color: var(--disabled-color);
+}
+
+.bg-card {
+  background-color: var(--card-bg);
+}
+
+.shadow-sm {
+  box-shadow: var(--shadow-sm);
+}
+
+.shadow-md {
+  box-shadow: var(--shadow-md);
+}
+
+.shadow-lg {
+  box-shadow: var(--shadow-lg);
+}
+
+.rounded-sm {
+  border-radius: var(--border-radius-sm);
+}
+
+.rounded-md {
+  border-radius: var(--border-radius-md);
+}
+
+.rounded-lg {
+  border-radius: var(--border-radius-lg);
+}
+
+/* Responsive breakpoints */
+@media (max-width: 640px) {
+  html {
+    font-size: 14px;
+  }
+}
+
+@media (min-width: 1200px) {
+  html {
+    font-size: 16px;
+  }
+}
+
+/* Print styles */
+@media print {
+  body {
+    background: white;
+  }
+
+  @page {
+    margin: 2cm;
+  }
+}

package/src/components/FileUpload.vue

@@ -0,0 +1,310 @@
+<template>
+  <div class="file-upload">
+    <div
+      class="upload-area"
+      :class="{ 'is-dragging': isDragging, 'has-files': files.length > 0 }"
+      @dragenter.prevent="handleDragEnter"
+      @dragleave.prevent="handleDragLeave"
+      @dragover.prevent
+      @drop.prevent="handleDrop"
+      @click="triggerFileInput"
+    >
+      <input ref="fileInput" type="file" multiple class="file-input" @change="handleFileSelect" />
+      <div class="upload-content">
+        <font-awesome-icon :icon="['fas', icon || 'upload']" />
+        <p v-if="files.length === 0">Drag & drop files here or click to select</p>
+        <div v-else class="selected-files">
+          <p>{{ files.length }} file(s) selected</p>
+          <div v-for="(file, index) in files" :key="index" class="file-info">
+            <span class="file-name">{{ file.name }}</span>
+            <span class="file-size">{{ formatFileSize(file.size) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="error" class="error-message">{{ error }}</div>
+    <div v-if="uploadProgress > 0 && uploadProgress < 100" class="progress-bar">
+      <div class="progress" :style="{ width: `${uploadProgress}%` }"></div>
+    </div>
+    <div v-if="uploadStatus" class="status-message" :class="uploadStatus.type">
+      {{ uploadStatus.message }}
+    </div>
+    <button v-if="files.length > 0 && !uploadUrl" class="upload-button" @click="handleStartUpload">
+      Upload Files
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const props = defineProps<{
+  icon?: string
+  uploadUrl?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'upload-complete', files: File[]): void
+  (e: 'upload-error', error: string): void
+  (e: 'files-selected', files: File[]): void
+  (e: 'start-upload', files: File[]): void
+}>()
+
+const MAX_FILE_SIZE = 20 * 1024 * 1024 // 20MB in bytes
+const fileInput = ref<HTMLInputElement | null>(null)
+const files = ref<File[]>([])
+const isDragging = ref(false)
+const uploadProgress = ref(0)
+const error = ref('')
+const uploadStatus = ref<{ type: 'success' | 'error'; message: string } | null>(null)
+
+const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return '0 Bytes'
+  const k = 1024
+  const sizes = ['Bytes', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+}
+
+const validateFileSize = (file: File): boolean => {
+  if (file.size > MAX_FILE_SIZE) {
+    error.value = `File "${file.name}" exceeds the maximum size of 20MB`
+    return false
+  }
+  return true
+}
+
+const handleDragEnter = () => {
+  isDragging.value = true
+}
+
+const handleDragLeave = () => {
+  isDragging.value = false
+}
+
+const handleDrop = (e: DragEvent) => {
+  isDragging.value = false
+  error.value = ''
+  if (e.dataTransfer?.files) {
+    const newFiles = Array.from(e.dataTransfer.files)
+    if (newFiles.every(validateFileSize)) {
+      files.value = [...files.value, ...newFiles]
+    }
+  }
+}
+
+const triggerFileInput = () => {
+  fileInput.value?.click()
+}
+
+const handleFileSelect = (e: Event) => {
+  error.value = ''
+  const input = e.target as HTMLInputElement
+  if (input.files) {
+    const newFiles = Array.from(input.files)
+    if (newFiles.every(validateFileSize)) {
+      files.value = [...files.value, ...newFiles]
+    }
+  }
+  input.value = ''
+}
+
+const uploadFiles = async () => {
+  if (!props.uploadUrl) {
+    error.value = 'No upload URL provided'
+    return
+  }
+
+  if (files.value.length === 0) {
+    error.value = 'No files selected'
+    return
+  }
+
+  const formData = new FormData()
+  files.value.forEach((file) => {
+    formData.append('files', file)
+  })
+
+  try {
+    const xhr = new XMLHttpRequest()
+    xhr.upload.addEventListener('progress', (e) => {
+      if (e.lengthComputable) {
+        uploadProgress.value = (e.loaded / e.total) * 100
+      }
+    })
+
+    xhr.addEventListener('load', () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        uploadStatus.value = {
+          type: 'success',
+          message: 'Upload completed successfully',
+        }
+        emit('upload-complete', files.value)
+        files.value = []
+        uploadProgress.value = 0
+      } else {
+        throw new Error(`Upload failed with status ${xhr.status}`)
+      }
+    })
+
+    xhr.addEventListener('error', () => {
+      throw new Error('Upload failed')
+    })
+
+    xhr.open('POST', props.uploadUrl)
+    xhr.send(formData)
+  } catch (err) {
+    const errorMessage = err instanceof Error ? err.message : 'Upload failed'
+    error.value = errorMessage
+    uploadStatus.value = {
+      type: 'error',
+      message: errorMessage,
+    }
+    emit('upload-error', errorMessage)
+  }
+}
+
+const handleStartUpload = () => {
+  emit('start-upload', files.value)
+}
+
+// Watch for changes in files and automatically upload when files are selected
+watch(files, (newFiles) => {
+  if (newFiles.length > 0) {
+    if (props.uploadUrl) {
+      uploadFiles()
+    } else {
+      emit('files-selected', newFiles)
+    }
+  }
+})
+</script>
+
+<style scoped>
+.file-upload {
+  width: 100%;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.upload-area {
+  border: 2px dashed var(--upload-border-color);
+  border-radius: 0.75rem;
+  padding: 2rem;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  background-color: var(--upload-bg-color);
+}
+
+.upload-area.is-dragging {
+  border-color: var(--upload-dragging-border-color);
+  background-color: var(--upload-dragging-bg-color);
+}
+
+.upload-area.has-files {
+  border-color: var(--upload-has-files-border-color);
+  background-color: var(--upload-has-files-bg-color);
+}
+
+.file-input {
+  display: none;
+}
+
+.upload-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.upload-content :deep(svg) {
+  font-size: 2rem;
+  color: var(--upload-icon-color);
+}
+
+.selected-files {
+  width: 100%;
+  text-align: left;
+  max-height: 200px;
+  overflow-y: auto;
+  font-size: 0.75rem;
+  color: var(--upload-text-color);
+}
+
+.file-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.125rem 0;
+  border-radius: 0.25rem;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+}
+
+.file-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-right: 0.5rem;
+}
+
+.file-size {
+  font-size: 0.7rem;
+  flex-shrink: 0;
+}
+
+.error-message {
+  color: var(--error-text-color);
+  margin-top: 1rem;
+  font-size: 0.875rem;
+}
+
+.progress-bar {
+  height: 0.5rem;
+  background-color: var(--progress-bg-color);
+  border-radius: 0.25rem;
+  margin-top: 1rem;
+  overflow: hidden;
+}
+
+.progress {
+  height: 100%;
+  background-color: var(--progress-color);
+  transition: width 0.3s ease;
+}
+
+.status-message {
+  margin-top: 1rem;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+}
+
+.status-message.success {
+  background-color: var(--success-bg-color);
+  color: var(--success-text-color);
+}
+
+.status-message.error {
+  background-color: var(--error-bg-color);
+  color: var(--error-text-color);
+}
+
+.upload-button {
+  margin-top: 1rem;
+  padding: 0.5rem 1rem;
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: background-color 0.3s ease;
+}
+
+.upload-button:hover {
+  background-color: var(--primary-color-light);
+}
+</style>