@datametria/vue-components 1.2.0 → 2.1.0

package/src/components/DatametriaDivider.vue

@@ -28,13 +28,13 @@ withDefaults(defineProps<Props>(), {
 .dm-divider {
   display: flex;
   align-items: center;
-  color: var(--dm-text-secondary);
-  font-size: var(--dm-text-sm);
+  color: var(--dm-neutral-600, #4b5563);
+  font-size: var(--dm-font-size-sm, 0.875rem);
 }
 
 .dm-divider--horizontal {
   width: 100%;
-  margin: var(--dm-space-4) 0;
+  margin: var(--dm-spacing-4, 1rem) 0;
 }
 
 .dm-divider--horizontal::before,
@@ -42,17 +42,17 @@ withDefaults(defineProps<Props>(), {
   content: '';
   flex: 1;
   height: 1px;
-  background: var(--dm-gray-300);
+  background: var(--dm-neutral-300, #d1d5db);
 }
 
 .dm-divider--horizontal .dm-divider__label {
-  padding: 0 var(--dm-space-3);
+  padding: 0 var(--dm-spacing-3, 0.75rem);
 }
 
 .dm-divider--vertical {
   height: 100%;
   flex-direction: column;
-  margin: 0 var(--dm-space-4);
+  margin: 0 var(--dm-spacing-4, 1rem);
 }
 
 .dm-divider--vertical::before,
@@ -60,23 +60,23 @@ withDefaults(defineProps<Props>(), {
   content: '';
   flex: 1;
   width: 1px;
-  background: var(--dm-gray-300);
+  background: var(--dm-neutral-300, #d1d5db);
 }
 
 .dm-divider--vertical .dm-divider__label {
-  padding: var(--dm-space-3) 0;
+  padding: var(--dm-spacing-3, 0.75rem) 0;
 }
 
 .dm-divider--dashed::before,
 .dm-divider--dashed::after {
   background: none;
-  border-top: 1px dashed var(--dm-gray-300);
+  border-top: 1px dashed var(--dm-neutral-300, #d1d5db);
 }
 
 .dm-divider--vertical.dm-divider--dashed::before,
 .dm-divider--vertical.dm-divider--dashed::after {
   border-top: none;
-  border-left: 1px dashed var(--dm-gray-300);
+  border-left: 1px dashed var(--dm-neutral-300, #d1d5db);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -84,17 +84,17 @@ withDefaults(defineProps<Props>(), {
   .dm-divider--horizontal::after,
   .dm-divider--vertical::before,
   .dm-divider--vertical::after {
-    background: var(--dm-gray-700);
+    background: var(--dm-neutral-700, #374151);
   }
 
   .dm-divider--dashed::before,
   .dm-divider--dashed::after {
-    border-color: var(--dm-gray-700);
+    border-color: var(--dm-neutral-700, #374151);
   }
 
   .dm-divider--vertical.dm-divider--dashed::before,
   .dm-divider--vertical.dm-divider--dashed::after {
-    border-color: var(--dm-gray-700);
+    border-color: var(--dm-neutral-700, #374151);
   }
 }
 </style>

package/src/components/DatametriaFileUpload.vue

@@ -1,169 +1,266 @@
 <template>
-  <div class="dm-file-upload">
-    <label v-if="label" class="dm-file-upload__label">
-      {{ label }}
-      <span v-if="required" class="dm-file-upload__required">*</span>
-    </label>
+  <div class="dm-file-upload" :class="{ 'dm-file-upload--disabled': disabled, 'dm-file-upload--loading': loading }">
     <div
-      class="dm-file-upload__dropzone"
-      :class="{ 'dm-file-upload--dragging': isDragOver, 'dm-file-upload__dropzone--dragover': isDragOver, 'dm-file-upload__dropzone--error': error }"
-      @dragover.prevent="handleDragOver"
-      @dragleave.prevent="handleDragLeave"
-      @drop.prevent="handleDrop"
+      class="dm-file-upload__area"
+      :class="{ 'dm-file-upload__area--dragover': isDragOver }"
       @click="triggerFileInput"
+      @drop="handleDrop"
+      @dragover="handleDragOver"
+      @dragenter="handleDragEnter"
+      @dragleave="handleDragLeave"
     >
       <input
-        ref="fileInput"
+        ref="fileInputRef"
         type="file"
         class="dm-file-upload__input"
         :accept="accept"
         :multiple="multiple"
         :disabled="disabled"
-        :required="required"
-        @change="handleFileChange"
+        @change="handleFileSelect"
       />
-      <div class="dm-file-upload__content">
-        <svg class="dm-file-upload__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-        <p class="dm-file-upload__text">
-          <span class="dm-file-upload__text--primary">Clique para selecionar</span>
-          ou arraste arquivos aqui
-        </p>
-        <p v-if="accept" class="dm-file-upload__hint">{{ accept }}</p>
+      
+      <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="selectedFiles.length" class="dm-file-upload__files">
-      <div v-for="(file, index) in selectedFiles" :key="index" class="dm-file-upload__file">
-        <span class="dm-file-upload__filename">{{ file.name }}</span>
-        <span class="dm-file-upload__filesize">{{ formatFileSize(file.size) }}</span>
+
+    <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)"
-          aria-label="Remover arquivo"
-        >×</button>
+        >
+          ×
+        </button>
       </div>
     </div>
-    <p v-if="error" class="dm-file-upload__error">{{ error }}</p>
+
+    <div v-if="computedError" class="dm-file-upload__error">
+      {{ computedError }}
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
 interface Props {
-  modelValue?: File[]
-  label?: string
+  modelValue?: File | File[]
   accept?: string
   multiple?: boolean
+  maxSize?: number // in bytes
+  maxFiles?: number
   disabled?: boolean
-  required?: boolean
+  loading?: boolean
+  progress?: number
+  uploadText?: string
   error?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  modelValue: () => [],
   multiple: false,
   disabled: false,
-  required: false
+  loading: false
 })
 
 const emit = defineEmits<{
-  'update:modelValue': [files: File[]]
+  'update:modelValue': [value: File | File[]]
+  'file-added': [file: File]
+  'file-removed': [file: File, index: number]
 }>()
 
-const fileInput = ref<HTMLInputElement>()
-const selectedFiles = ref<File[]>(props.modelValue)
+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) {
-    fileInput.value?.click()
+  if (!props.disabled && fileInputRef.value) {
+    fileInputRef.value.click()
   }
 }
 
-const handleFileChange = (event: Event) => {
-  const files = Array.from((event.target as HTMLInputElement).files || [])
-  updateFiles(files)
+const handleFileSelect = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  if (target.files) {
+    processFiles(Array.from(target.files))
+  }
 }
 
-const handleDragOver = () => {
-  if (!props.disabled) {
-    isDragOver.value = true
+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 handleDragLeave = () => {
-  isDragOver.value = false
+const handleDragOver = (event: DragEvent) => {
+  event.preventDefault()
 }
 
-const handleDrop = (event: DragEvent) => {
-  isDragOver.value = false
+const handleDragEnter = (event: DragEvent) => {
+  event.preventDefault()
   if (!props.disabled) {
-    const files = Array.from(event.dataTransfer?.files || [])
-    updateFiles(files)
+    isDragOver.value = true
   }
 }
 
-const updateFiles = (files: File[]) => {
-  selectedFiles.value = props.multiple ? [...selectedFiles.value, ...files] : files
-  emit('update:modelValue', selectedFiles.value)
+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)
-  emit('update:modelValue', selectedFiles.value)
+  
+  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 B'
+  if (bytes === 0) return '0 Bytes'
+  
   const k = 1024
-  const sizes = ['B', 'KB', 'MB', 'GB']
+  const sizes = ['Bytes', 'KB', 'MB', 'GB']
   const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`
+  
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
 }
 </script>
 
 <style scoped>
 .dm-file-upload {
-  display: flex;
-  flex-direction: column;
-  gap: var(--dm-space-2);
+  width: 100%;
 }
 
-.dm-file-upload__label {
-  color: var(--dm-text-primary);
-  font-size: var(--dm-text-sm);
-  font-weight: 500;
+.dm-file-upload--disabled {
+  opacity: 0.6;
+  pointer-events: none;
 }
 
-.dm-file-upload__required {
-  color: var(--dm-error);
+.dm-file-upload--loading {
+  opacity: 0.8;
 }
 
-.dm-file-upload__dropzone {
-  border: 2px dashed var(--dm-gray-300);
-  border-radius: var(--dm-radius);
-  padding: var(--dm-space-6);
+.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: var(--dm-transition);
-  background: var(--dm-white);
-}
-
-.dm-file-upload__dropzone:hover {
-  border-color: var(--dm-primary);
-  background: var(--dm-gray-50);
+  transition: all 0.2s;
+  background-color: var(--dm-neutral-50, #f9fafb);
 }
 
-.dm-file-upload__dropzone--dragover {
-  border-color: var(--dm-primary);
-  background: var(--dm-primary-light, rgba(0, 114, 206, 0.1));
+.dm-file-upload__area:hover {
+  border-color: var(--dm-primary, #0072ce);
+  background-color: var(--dm-neutral-100, #f3f4f6);
 }
 
-.dm-file-upload__dropzone--error {
-  border-color: var(--dm-error);
+.dm-file-upload__area--dragover {
+  border-color: var(--dm-primary, #0072ce);
+  background-color: rgba(0, 114, 206, 0.05);
 }
 
 .dm-file-upload__input {
@@ -174,95 +271,130 @@ const formatFileSize = (bytes: number): string => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--dm-space-2);
+  gap: 1rem;
 }
 
 .dm-file-upload__icon {
-  width: 48px;
-  height: 48px;
-  color: var(--dm-gray-400);
+  width: 3rem;
+  height: 3rem;
+  color: var(--dm-neutral-400, #9ca3af);
+}
+
+.dm-file-upload__icon svg {
+  width: 100%;
+  height: 100%;
 }
 
 .dm-file-upload__text {
-  color: var(--dm-text-secondary);
-  font-size: var(--dm-text-sm);
-  margin: 0;
+  text-align: center;
 }
 
-.dm-file-upload__text--primary {
-  color: var(--dm-primary);
+.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__hint {
-  color: var(--dm-gray-500);
-  font-size: var(--dm-text-xs);
+.dm-file-upload__secondary-text {
+  font-size: 0.875rem;
+  color: var(--dm-neutral-500, #6b7280);
   margin: 0;
 }
 
-.dm-file-upload__files {
-  display: flex;
-  flex-direction: column;
-  gap: var(--dm-space-2);
+.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;
 }
 
-.dm-file-upload__file {
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.dm-file-upload__progress {
+  margin-top: 1rem;
   display: flex;
   align-items: center;
-  gap: var(--dm-space-2);
-  padding: var(--dm-space-2) var(--dm-space-3);
-  background: var(--dm-gray-50);
-  border-radius: var(--dm-radius);
+  gap: 1rem;
 }
 
-.dm-file-upload__filename {
+.dm-file-upload__progress-track {
   flex: 1;
-  font-size: var(--dm-text-sm);
-  color: var(--dm-text-primary);
+  height: 0.5rem;
+  background-color: var(--dm-neutral-200, #e5e7eb);
+  border-radius: var(--dm-radius-full, 9999px);
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
-.dm-file-upload__filesize {
-  font-size: var(--dm-text-xs);
-  color: var(--dm-gray-500);
+.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 {
-  width: 24px;
-  height: 24px;
+  background: none;
   border: none;
-  background: transparent;
-  color: var(--dm-gray-500);
-  font-size: 24px;
-  line-height: 1;
+  color: var(--dm-error, #ef4444);
   cursor: pointer;
-  transition: var(--dm-transition);
+  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 {
-  color: var(--dm-error);
+  background-color: var(--dm-error, #ef4444);
+  color: white;
 }
 
 .dm-file-upload__error {
-  color: var(--dm-error);
-  font-size: var(--dm-text-sm);
-  margin: 0;
-}
-
-@media (prefers-color-scheme: dark) {
-  .dm-file-upload__dropzone {
-    background: var(--dm-gray-800);
-    border-color: var(--dm-gray-600);
-  }
-
-  .dm-file-upload__dropzone:hover {
-    background: var(--dm-gray-700);
-  }
-
-  .dm-file-upload__file {
-    background: var(--dm-gray-700);
-  }
+  margin-top: 0.5rem;
+  color: var(--dm-error, #ef4444);
+  font-size: 0.875rem;
 }
-</style>
+</style>