@a-vision-software/vue-input-components 1.1.42 → 1.1.51

package/README.md

@@ -35,7 +35,7 @@ A collection of reusable Vue 3 input components with TypeScript support.
 ## Installation
 
 ```bash
-npm install @a-vision-software/vue-input-components
+npm install npm install git+ssh://github.com:a-vision/vue-input-components.git
 ```
 
 ## Quick Start
@@ -44,7 +44,7 @@ npm install @a-vision-software/vue-input-components
 
    ```vue
    <script setup>
-   import { TextInput, FileUpload } from '@a-vision-software/vue-input-components'
+   import { TextInput, FileUpload } from 'vue-input-components'
    </script>
    ```
 
@@ -55,6 +55,7 @@ npm install @a-vision-software/vue-input-components
    ```
 
 3. Use the components in your template:
+
    ```vue
    <template>
      <TextInput v-model="username" label="Username" icon="user" :required="true" />

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "@a-vision-software/vue-input-components",
-  "version": "1.1.42",
+  "version": "1.1.51",
   "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/vue-input-components.git"
+  },
+  "homepage": "https://github.com/a-vision/vue-input-components#readme",
   "keywords": [
     "vue",
     "vue3",
@@ -17,23 +22,11 @@
   ],
   "type": "module",
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "main": "./dist/vue-input-components.cjs.js",
-  "module": "./dist/vue-input-components.es.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/vue-input-components.cjs.js",
-      "default": "./dist/vue-input-components.es.js",
-      "require": "./dist/vue-input-components.umd.js"
-    },
-    "./style": "./dist/vue-input-components.css",
-    "./dist/*": "./dist/*",
-    "./package.json": "./package.json"
-  },
+  "module": "./dist/vue-input-components.cjs.js",
+  "exports": "./dist/vue-input-components.es.js",
   "sideEffects": [
     "**/*.css"
   ],

package/src/App.vue

@@ -1,48 +0,0 @@
-<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

@@ -1,67 +0,0 @@
-: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

@@ -1 +0,0 @@
-<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

@@ -1,160 +0,0 @@
-: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

@@ -1,310 +0,0 @@
-<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>