@datametria/vue-components 2.3.0 → 2.4.0

package/src/components/DatametriaFileUpload.vue

@@ -1,400 +1,418 @@
-<template>
-  <div class="dm-file-upload" :class="{ 'dm-file-upload--disabled': disabled, 'dm-file-upload--loading': loading }">
-    <div
-      class="dm-file-upload__area"
-      :class="{ 'dm-file-upload__area--dragover': isDragOver }"
-      @click="triggerFileInput"
-      @drop="handleDrop"
-      @dragover="handleDragOver"
-      @dragenter="handleDragEnter"
-      @dragleave="handleDragLeave"
-    >
-      <input
-        ref="fileInputRef"
-        type="file"
-        class="dm-file-upload__input"
-        :accept="accept"
-        :multiple="multiple"
-        :disabled="disabled"
-        @change="handleFileSelect"
-      />
-      
-      <div v-if="loading" class="dm-file-upload__spinner"></div>
-      
-      <div v-else class="dm-file-upload__content">
-        <div class="dm-file-upload__icon">
-          <svg viewBox="0 0 24 24" fill="currentColor">
-            <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
-          </svg>
-        </div>
-        
-        <div class="dm-file-upload__text">
-          <p class="dm-file-upload__primary-text">
-            {{ uploadText || 'Click to upload or drag and drop' }}
-          </p>
-          <p class="dm-file-upload__secondary-text">
-            {{ accept ? `Supported formats: ${accept}` : 'All file types supported' }}
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <div v-if="progress !== undefined" class="dm-file-upload__progress">
-      <div class="dm-file-upload__progress-track">
-        <div
-          class="dm-file-upload__progress-bar"
-          :style="{ width: `${progress}%` }"
-        ></div>
-      </div>
-      <span class="dm-file-upload__progress-text">{{ progress }}%</span>
-    </div>
-
-    <div v-if="selectedFiles.length > 0" class="dm-file-upload__files">
-      <div
-        v-for="(file, index) in selectedFiles"
-        :key="`${file.name}-${index}`"
-        class="dm-file-upload__file"
-      >
-        <div class="dm-file-upload__file-info">
-          <span class="dm-file-upload__file-name">{{ file.name }}</span>
-          <span class="dm-file-upload__file-size">{{ formatFileSize(file.size) }}</span>
-        </div>
-        <button
-          type="button"
-          class="dm-file-upload__remove"
-          @click="removeFile(index)"
-        >
-          ×
-        </button>
-      </div>
-    </div>
-
-    <div v-if="computedError" class="dm-file-upload__error">
-      {{ computedError }}
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-
-interface Props {
-  modelValue?: File | File[]
-  accept?: string
-  multiple?: boolean
-  maxSize?: number // in bytes
-  maxFiles?: number
-  disabled?: boolean
-  loading?: boolean
-  progress?: number
-  uploadText?: string
-  error?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  multiple: false,
-  disabled: false,
-  loading: false
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: File | File[]]
-  'file-added': [file: File]
-  'file-removed': [file: File, index: number]
-}>()
-
-const fileInputRef = ref<HTMLInputElement>()
-const isDragOver = ref(false)
-const selectedFiles = ref<File[]>([])
-const validationError = ref('')
-
-const computedError = computed(() => props.error || validationError.value)
-
-const triggerFileInput = () => {
-  if (!props.disabled && fileInputRef.value) {
-    fileInputRef.value.click()
-  }
-}
-
-const handleFileSelect = (event: Event) => {
-  const target = event.target as HTMLInputElement
-  if (target.files) {
-    processFiles(Array.from(target.files))
-  }
-}
-
-const handleDrop = (event: DragEvent) => {
-  event.preventDefault()
-  isDragOver.value = false
-  
-  if (props.disabled) return
-  
-  const files = event.dataTransfer?.files
-  if (files) {
-    processFiles(Array.from(files))
-  }
-}
-
-const handleDragOver = (event: DragEvent) => {
-  event.preventDefault()
-}
-
-const handleDragEnter = (event: DragEvent) => {
-  event.preventDefault()
-  if (!props.disabled) {
-    isDragOver.value = true
+<template>
+  <div class="dm-file-upload" :class="{ 'dm-file-upload--disabled': disabled, 'dm-file-upload--loading': loading }">
+    <div
+      class="dm-file-upload__area"
+      :class="{ 'dm-file-upload__area--dragover': isDragOver }"
+      @click="triggerFileInput"
+      @drop="handleDrop"
+      @dragover="handleDragOver"
+      @dragenter="handleDragEnter"
+      @dragleave="handleDragLeave"
+    >
+      <input
+        ref="fileInputRef"
+        type="file"
+        class="dm-file-upload__input"
+        :accept="accept"
+        :multiple="multiple"
+        :disabled="disabled"
+        @change="handleFileSelect"
+      />
+      
+      <div v-if="loading" class="dm-file-upload__spinner"></div>
+      
+      <div v-else class="dm-file-upload__content">
+        <div class="dm-file-upload__icon">
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
+          </svg>
+        </div>
+        
+        <div class="dm-file-upload__text">
+          <p class="dm-file-upload__primary-text">
+            {{ uploadText || 'Click to upload or drag and drop' }}
+          </p>
+          <p class="dm-file-upload__secondary-text">
+            {{ accept ? `Supported formats: ${accept}` : 'All file types supported' }}
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="progress !== undefined" class="dm-file-upload__progress">
+      <div class="dm-file-upload__progress-track">
+        <div
+          class="dm-file-upload__progress-bar"
+          :style="{ width: `${progress}%` }"
+        ></div>
+      </div>
+      <span class="dm-file-upload__progress-text">{{ progress }}%</span>
+    </div>
+
+    <div v-if="selectedFiles.length > 0" class="dm-file-upload__files">
+      <div
+        v-for="(file, index) in selectedFiles"
+        :key="`${file.name}-${index}`"
+        class="dm-file-upload__file"
+      >
+        <div class="dm-file-upload__file-info">
+          <span class="dm-file-upload__file-name">{{ file.name }}</span>
+          <span class="dm-file-upload__file-size">{{ formatFileSize(file.size) }}</span>
+        </div>
+        <button
+          type="button"
+          class="dm-file-upload__remove"
+          @click="removeFile(index)"
+        >
+          ×
+        </button>
+      </div>
+    </div>
+
+    <div v-if="computedError" class="dm-file-upload__error">
+      {{ computedError }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+interface Props {
+  modelValue?: File | File[]
+  accept?: string
+  multiple?: boolean
+  maxSize?: number // in bytes
+  maxFiles?: number
+  disabled?: boolean
+  loading?: boolean
+  progress?: number
+  uploadText?: string
+  error?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  multiple: false,
+  disabled: false,
+  loading: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: File | File[]]
+  'file-added': [file: File]
+  'file-removed': [file: File, index: number]
+}>()
+
+const fileInputRef = ref<HTMLInputElement>()
+const isDragOver = ref(false)
+const selectedFiles = ref<File[]>([])
+const validationError = ref('')
+
+const computedError = computed(() => props.error || validationError.value)
+
+const triggerFileInput = () => {
+  if (!props.disabled && fileInputRef.value) {
+    fileInputRef.value.click()
+  }
+}
+
+const handleFileSelect = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  if (target.files) {
+    processFiles(Array.from(target.files))
+  }
+}
+
+const handleDrop = (event: DragEvent) => {
+  event.preventDefault()
+  isDragOver.value = false
+  
+  if (props.disabled) return
+  
+  const files = event.dataTransfer?.files
+  if (files) {
+    processFiles(Array.from(files))
+  }
+}
+
+const handleDragOver = (event: DragEvent) => {
+  event.preventDefault()
+}
+
+const handleDragEnter = (event: DragEvent) => {
+  event.preventDefault()
+  if (!props.disabled) {
+    isDragOver.value = true
+  }
+}
+
+const handleDragLeave = (event: DragEvent) => {
+  event.preventDefault()
+  // Only set to false if we're leaving the drop area entirely
+  if (!(event.currentTarget as Element)?.contains(event.relatedTarget as Node)) {
+    isDragOver.value = false
+  }
+}
+
+const processFiles = (files: File[]) => {
+  validationError.value = ''
+  
+  // Validate file types
+  if (props.accept) {
+    const acceptedTypes = props.accept.split(',').map(type => type.trim())
+    const invalidFiles = files.filter(file => {
+      return !acceptedTypes.some(type => {
+        if (type.startsWith('.')) {
+          return file.name.toLowerCase().endsWith(type.toLowerCase())
+        }
+        return file.type.match(type.replace('*', '.*'))
+      })
+    })
+    
+    if (invalidFiles.length > 0) {
+      validationError.value = `Invalid file type(s): ${invalidFiles.map(f => f.name).join(', ')}`
+      return
+    }
+  }
+  
+  // Validate file sizes
+  if (props.maxSize) {
+    const oversizedFiles = files.filter(file => file.size > props.maxSize!)
+    if (oversizedFiles.length > 0) {
+      validationError.value = `File(s) too large: ${oversizedFiles.map(f => f.name).join(', ')}`
+      return
+    }
+  }
+  
+  // Validate number of files
+  if (props.multiple) {
+    const totalFiles = selectedFiles.value.length + files.length
+    if (props.maxFiles && totalFiles > props.maxFiles) {
+      validationError.value = `Maximum ${props.maxFiles} files allowed`
+      return
+    }
+    
+    selectedFiles.value.push(...files)
+    emit('update:modelValue', selectedFiles.value)
+  } else {
+    selectedFiles.value = [files[0]]
+    emit('update:modelValue', files[0])
+  }
+  
+  // Emit file-added events
+  files.forEach(file => {
+    emit('file-added', file)
+  })
+}
+
+const removeFile = (index: number) => {
+  const removedFile = selectedFiles.value[index]
+  selectedFiles.value.splice(index, 1)
+  
+  if (props.multiple) {
+    emit('update:modelValue', selectedFiles.value)
+  } else {
+    emit('update:modelValue', selectedFiles.value[0] || null)
+  }
+  
+  emit('file-removed', removedFile, index)
+}
+
+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]
+}
+</script>
+
+<style scoped>
+.dm-file-upload {
+  width: 100%;
+}
+
+.dm-file-upload--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.dm-file-upload--loading {
+  opacity: 0.8;
+}
+
+.dm-file-upload__area {
+  border: 2px dashed var(--dm-neutral-300, #d1d5db);
+  border-radius: var(--dm-radius-lg, 0.5rem);
+  padding: 2rem;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  background-color: var(--dm-neutral-50, #f9fafb);
+}
+
+.dm-file-upload__area:hover {
+  border-color: var(--dm-primary, #0072ce);
+  background-color: var(--dm-neutral-100, #f3f4f6);
+}
+
+.dm-file-upload__area--dragover {
+  border-color: var(--dm-primary, #0072ce);
+  background-color: rgba(0, 114, 206, 0.05);
+}
+
+.dm-file-upload__input {
+  display: none;
+}
+
+.dm-file-upload__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.dm-file-upload__icon {
+  width: 3rem;
+  height: 3rem;
+  color: var(--dm-neutral-400, #9ca3af);
+}
+
+.dm-file-upload__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.dm-file-upload__text {
+  text-align: center;
+}
+
+.dm-file-upload__primary-text {
+  font-size: 1.125rem;
+  font-weight: 500;
+  color: var(--dm-neutral-700, #374151);
+  margin: 0 0 0.5rem 0;
+}
+
+.dm-file-upload__secondary-text {
+  font-size: 0.875rem;
+  color: var(--dm-neutral-500, #6b7280);
+  margin: 0;
+}
+
+.dm-file-upload__spinner {
+  width: 2rem;
+  height: 2rem;
+  border: 3px solid var(--dm-neutral-300, #d1d5db);
+  border-top: 3px solid var(--dm-primary, #0072ce);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.dm-file-upload__progress {
+  margin-top: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.dm-file-upload__progress-track {
+  flex: 1;
+  height: 0.5rem;
+  background-color: var(--dm-neutral-200, #e5e7eb);
+  border-radius: var(--dm-radius-full, 9999px);
+  overflow: hidden;
+}
+
+.dm-file-upload__progress-bar {
+  height: 100%;
+  background-color: var(--dm-primary, #0072ce);
+  transition: width 0.3s ease;
+}
+
+.dm-file-upload__progress-text {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--dm-neutral-600, #4b5563);
+  min-width: 3rem;
+}
+
+.dm-file-upload__files {
+  margin-top: 1rem;
+  space-y: 0.5rem;
+}
+
+.dm-file-upload__file {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem;
+  background-color: var(--dm-neutral-50, #f9fafb);
+  border: 1px solid var(--dm-neutral-200, #e5e7eb);
+  border-radius: var(--dm-radius-md, 0.375rem);
+  margin-bottom: 0.5rem;
+}
+
+.dm-file-upload__file-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.dm-file-upload__file-name {
+  font-weight: 500;
+  color: var(--dm-neutral-700, #374151);
+}
+
+.dm-file-upload__file-size {
+  font-size: 0.875rem;
+  color: var(--dm-neutral-500, #6b7280);
+}
+
+.dm-file-upload__remove {
+  background: none;
+  border: none;
+  color: var(--dm-error, #ef4444);
+  cursor: pointer;
+  font-size: 1.25rem;
+  padding: 0.25rem;
+  border-radius: var(--dm-radius-sm, 0.25rem);
+  transition: background-color 0.2s;
+}
+
+.dm-file-upload__remove:hover {
+  background-color: var(--dm-error, #ef4444);
+  color: white;
+}
+
+.dm-file-upload__error {
+  margin-top: 0.5rem;
+  color: var(--dm-error, #ef4444);
+  font-size: 0.875rem;
+}
+
+/* Dark Mode Support - Hybrid Approach */
+
+/* Fallback automático (sem JS) */
+@media (prefers-color-scheme: dark) {
+  .dm-file-upload {
+    background: var(--dm-bg-color-dark, #1e1e1e);
+    color: var(--dm-text-primary-dark, #e0e0e0);
+    border-color: var(--dm-border-color-dark, #404040);
   }
 }
 
-const handleDragLeave = (event: DragEvent) => {
-  event.preventDefault()
-  // Only set to false if we're leaving the drop area entirely
-  if (!(event.currentTarget as Element)?.contains(event.relatedTarget as Node)) {
-    isDragOver.value = false
-  }
-}
-
-const processFiles = (files: File[]) => {
-  validationError.value = ''
-  
-  // Validate file types
-  if (props.accept) {
-    const acceptedTypes = props.accept.split(',').map(type => type.trim())
-    const invalidFiles = files.filter(file => {
-      return !acceptedTypes.some(type => {
-        if (type.startsWith('.')) {
-          return file.name.toLowerCase().endsWith(type.toLowerCase())
-        }
-        return file.type.match(type.replace('*', '.*'))
-      })
-    })
-    
-    if (invalidFiles.length > 0) {
-      validationError.value = `Invalid file type(s): ${invalidFiles.map(f => f.name).join(', ')}`
-      return
-    }
-  }
-  
-  // Validate file sizes
-  if (props.maxSize) {
-    const oversizedFiles = files.filter(file => file.size > props.maxSize!)
-    if (oversizedFiles.length > 0) {
-      validationError.value = `File(s) too large: ${oversizedFiles.map(f => f.name).join(', ')}`
-      return
-    }
-  }
-  
-  // Validate number of files
-  if (props.multiple) {
-    const totalFiles = selectedFiles.value.length + files.length
-    if (props.maxFiles && totalFiles > props.maxFiles) {
-      validationError.value = `Maximum ${props.maxFiles} files allowed`
-      return
-    }
-    
-    selectedFiles.value.push(...files)
-    emit('update:modelValue', selectedFiles.value)
-  } else {
-    selectedFiles.value = [files[0]]
-    emit('update:modelValue', files[0])
-  }
-  
-  // Emit file-added events
-  files.forEach(file => {
-    emit('file-added', file)
-  })
-}
-
-const removeFile = (index: number) => {
-  const removedFile = selectedFiles.value[index]
-  selectedFiles.value.splice(index, 1)
-  
-  if (props.multiple) {
-    emit('update:modelValue', selectedFiles.value)
-  } else {
-    emit('update:modelValue', selectedFiles.value[0] || null)
-  }
-  
-  emit('file-removed', removedFile, index)
-}
-
-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]
-}
-</script>
-
-<style scoped>
-.dm-file-upload {
-  width: 100%;
-}
-
-.dm-file-upload--disabled {
-  opacity: 0.6;
-  pointer-events: none;
-}
-
-.dm-file-upload--loading {
-  opacity: 0.8;
-}
-
-.dm-file-upload__area {
-  border: 2px dashed var(--dm-neutral-300, #d1d5db);
-  border-radius: var(--dm-radius-lg, 0.5rem);
-  padding: 2rem;
-  text-align: center;
-  cursor: pointer;
-  transition: all 0.2s;
-  background-color: var(--dm-neutral-50, #f9fafb);
-}
-
-.dm-file-upload__area:hover {
-  border-color: var(--dm-primary, #0072ce);
-  background-color: var(--dm-neutral-100, #f3f4f6);
-}
-
-.dm-file-upload__area--dragover {
-  border-color: var(--dm-primary, #0072ce);
-  background-color: rgba(0, 114, 206, 0.05);
-}
-
-.dm-file-upload__input {
-  display: none;
-}
-
-.dm-file-upload__content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-}
-
-.dm-file-upload__icon {
-  width: 3rem;
-  height: 3rem;
-  color: var(--dm-neutral-400, #9ca3af);
-}
-
-.dm-file-upload__icon svg {
-  width: 100%;
-  height: 100%;
-}
-
-.dm-file-upload__text {
-  text-align: center;
-}
-
-.dm-file-upload__primary-text {
-  font-size: 1.125rem;
-  font-weight: 500;
-  color: var(--dm-neutral-700, #374151);
-  margin: 0 0 0.5rem 0;
-}
-
-.dm-file-upload__secondary-text {
-  font-size: 0.875rem;
-  color: var(--dm-neutral-500, #6b7280);
-  margin: 0;
-}
-
-.dm-file-upload__spinner {
-  width: 2rem;
-  height: 2rem;
-  border: 3px solid var(--dm-neutral-300, #d1d5db);
-  border-top: 3px solid var(--dm-primary, #0072ce);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-.dm-file-upload__progress {
-  margin-top: 1rem;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.dm-file-upload__progress-track {
-  flex: 1;
-  height: 0.5rem;
-  background-color: var(--dm-neutral-200, #e5e7eb);
-  border-radius: var(--dm-radius-full, 9999px);
-  overflow: hidden;
-}
-
-.dm-file-upload__progress-bar {
-  height: 100%;
-  background-color: var(--dm-primary, #0072ce);
-  transition: width 0.3s ease;
-}
-
-.dm-file-upload__progress-text {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--dm-neutral-600, #4b5563);
-  min-width: 3rem;
-}
-
-.dm-file-upload__files {
-  margin-top: 1rem;
-  space-y: 0.5rem;
-}
-
-.dm-file-upload__file {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem;
-  background-color: var(--dm-neutral-50, #f9fafb);
-  border: 1px solid var(--dm-neutral-200, #e5e7eb);
-  border-radius: var(--dm-radius-md, 0.375rem);
-  margin-bottom: 0.5rem;
-}
-
-.dm-file-upload__file-info {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.dm-file-upload__file-name {
-  font-weight: 500;
-  color: var(--dm-neutral-700, #374151);
-}
-
-.dm-file-upload__file-size {
-  font-size: 0.875rem;
-  color: var(--dm-neutral-500, #6b7280);
-}
-
-.dm-file-upload__remove {
-  background: none;
-  border: none;
-  color: var(--dm-error, #ef4444);
-  cursor: pointer;
-  font-size: 1.25rem;
-  padding: 0.25rem;
-  border-radius: var(--dm-radius-sm, 0.25rem);
-  transition: background-color 0.2s;
-}
-
-.dm-file-upload__remove:hover {
-  background-color: var(--dm-error, #ef4444);
-  color: white;
-}
-
-.dm-file-upload__error {
-  margin-top: 0.5rem;
-  color: var(--dm-error, #ef4444);
-  font-size: 0.875rem;
+/* Controle manual via useTheme() */
+[data-theme="dark"] .dm-file-upload {
+  background: var(--dm-bg-color-dark, #1e1e1e);
+  color: var(--dm-text-primary-dark, #e0e0e0);
+  border-color: var(--dm-border-color-dark, #404040);
 }
 </style>