@datametria/vue-components 2.3.0 → 2.4.0

package/src/components/DatametriaUpload.vue

@@ -1,365 +1,383 @@
-<template>
-  <div class="datametria-upload" :class="{ 'datametria-upload--disabled': disabled }">
-    <div
-      v-if="drag"
-      class="datametria-upload__drag"
-      :class="{ 'datametria-upload__drag--over': isDragOver }"
-      @drop.prevent="handleDrop"
-      @dragover.prevent="isDragOver = true"
-      @dragleave.prevent="isDragOver = false"
-    >
-      <slot name="trigger">
-        <div class="datametria-upload__drag-content">
-          <span>Arraste arquivos aqui ou clique para selecionar</span>
-        </div>
-      </slot>
-      <input
-        ref="inputRef"
-        type="file"
-        class="datametria-upload__input"
-        :accept="accept"
-        :multiple="multiple"
-        :disabled="disabled"
-        @change="handleChange"
-      />
-    </div>
-    <div v-else class="datametria-upload__button">
-      <slot name="trigger">
-        <button type="button" :disabled="disabled" @click="triggerUpload">
-          Selecionar arquivo
-        </button>
-      </slot>
-      <input
-        ref="inputRef"
-        type="file"
-        class="datametria-upload__input"
-        :accept="accept"
-        :multiple="multiple"
-        :disabled="disabled"
-        @change="handleChange"
-      />
-    </div>
-    <div v-if="fileList.length" class="datametria-upload__list">
-      <div
-        v-for="file in fileList"
-        :key="file.uid"
-        class="datametria-upload__item"
-      >
-        <img
-          v-if="file.preview"
-          :src="file.preview"
-          class="datametria-upload__preview"
-          alt="preview"
-        />
-        <div class="datametria-upload__info">
-          <span class="datametria-upload__name">{{ file.name }}</span>
-          <span class="datametria-upload__size">{{ formatSize(file.size) }}</span>
-        </div>
-        <div v-if="file.status === 'uploading'" class="datametria-upload__progress">
-          <div
-            class="datametria-upload__progress-bar"
-            :style="{ width: `${file.progress}%` }"
-          />
-        </div>
-        <button
-          type="button"
-          class="datametria-upload__remove"
-          @click="removeFile(file)"
-        >
-          ×
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-
-interface UploadFile {
-  uid: string
-  name: string
-  size: number
-  status: 'ready' | 'uploading' | 'success' | 'error'
-  progress: number
-  preview?: string
-  raw: File
-}
-
-interface Props {
-  modelValue?: UploadFile[]
-  action?: string
-  accept?: string
-  multiple?: boolean
-  limit?: number
-  maxSize?: number
-  drag?: boolean
-  disabled?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: () => [],
-  action: '',
-  accept: '',
-  multiple: false,
-  limit: 0,
-  maxSize: 0,
-  drag: false,
-  disabled: false
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [files: UploadFile[]]
-  change: [files: UploadFile[]]
-  exceed: [files: File[]]
-  error: [error: Error, file: File]
-  success: [response: any, file: UploadFile]
-}>()
-
-const inputRef = ref<HTMLInputElement>()
-const isDragOver = ref(false)
-const fileList = ref<UploadFile[]>(props.modelValue)
-let uidCounter = 0
-
-const triggerUpload = () => {
-  inputRef.value?.click()
-}
-
-const handleChange = (event: Event) => {
-  const target = event.target as HTMLInputElement
-  const files = Array.from(target.files || [])
-  handleFiles(files)
-  target.value = ''
-}
-
-const handleDrop = (event: DragEvent) => {
-  isDragOver.value = false
-  const files = Array.from(event.dataTransfer?.files || [])
-  handleFiles(files)
-}
-
-const handleFiles = (files: File[]) => {
-  if (props.disabled) return
-
-  if (props.limit && fileList.value.length + files.length > props.limit) {
-    emit('exceed', files)
-    return
-  }
-
-  files.forEach(file => {
-    if (props.maxSize && file.size > props.maxSize) {
-      emit('error', new Error('File size exceeds limit'), file)
-      return
-    }
-
-    if (props.accept && !validateFileType(file)) {
-      emit('error', new Error('Invalid file type'), file)
-      return
-    }
-
-    const uploadFile: UploadFile = {
-      uid: `upload-${Date.now()}-${uidCounter++}`,
-      name: file.name,
-      size: file.size,
-      status: 'ready',
-      progress: 0,
-      raw: file
-    }
-
-    if (file.type.startsWith('image/')) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        uploadFile.preview = e.target?.result as string
-      }
-      reader.readAsDataURL(file)
-    }
-
-    fileList.value.push(uploadFile)
-
-    if (props.action) {
-      uploadFile.status = 'uploading'
-      simulateUpload(uploadFile)
-    }
-  })
-
-  emit('update:modelValue', fileList.value)
-  emit('change', fileList.value)
-}
-
-const validateFileType = (file: File): boolean => {
-  const acceptTypes = props.accept.split(',').map(t => t.trim())
-  return acceptTypes.some(type => {
-    if (type.startsWith('.')) {
-      return file.name.toLowerCase().endsWith(type.toLowerCase())
-    }
-    if (type.endsWith('/*')) {
-      return file.type.startsWith(type.replace('/*', ''))
-    }
-    return file.type === type
-  })
-}
-
-const simulateUpload = (file: UploadFile) => {
-  const interval = setInterval(() => {
-    file.progress += 10
-    if (file.progress >= 100) {
-      clearInterval(interval)
-      file.status = 'success'
-      emit('success', { status: 'success' }, file)
-    }
-  }, 100)
-}
-
-const removeFile = (file: UploadFile) => {
-  const index = fileList.value.indexOf(file)
-  if (index > -1) {
-    fileList.value.splice(index, 1)
-    emit('update:modelValue', fileList.value)
-    emit('change', fileList.value)
+<template>
+  <div class="datametria-upload" :class="{ 'datametria-upload--disabled': disabled }">
+    <div
+      v-if="drag"
+      class="datametria-upload__drag"
+      :class="{ 'datametria-upload__drag--over': isDragOver }"
+      @drop.prevent="handleDrop"
+      @dragover.prevent="isDragOver = true"
+      @dragleave.prevent="isDragOver = false"
+    >
+      <slot name="trigger">
+        <div class="datametria-upload__drag-content">
+          <span>Arraste arquivos aqui ou clique para selecionar</span>
+        </div>
+      </slot>
+      <input
+        ref="inputRef"
+        type="file"
+        class="datametria-upload__input"
+        :accept="accept"
+        :multiple="multiple"
+        :disabled="disabled"
+        @change="handleChange"
+      />
+    </div>
+    <div v-else class="datametria-upload__button">
+      <slot name="trigger">
+        <button type="button" :disabled="disabled" @click="triggerUpload">
+          Selecionar arquivo
+        </button>
+      </slot>
+      <input
+        ref="inputRef"
+        type="file"
+        class="datametria-upload__input"
+        :accept="accept"
+        :multiple="multiple"
+        :disabled="disabled"
+        @change="handleChange"
+      />
+    </div>
+    <div v-if="fileList.length" class="datametria-upload__list">
+      <div
+        v-for="file in fileList"
+        :key="file.uid"
+        class="datametria-upload__item"
+      >
+        <img
+          v-if="file.preview"
+          :src="file.preview"
+          class="datametria-upload__preview"
+          alt="preview"
+        />
+        <div class="datametria-upload__info">
+          <span class="datametria-upload__name">{{ file.name }}</span>
+          <span class="datametria-upload__size">{{ formatSize(file.size) }}</span>
+        </div>
+        <div v-if="file.status === 'uploading'" class="datametria-upload__progress">
+          <div
+            class="datametria-upload__progress-bar"
+            :style="{ width: `${file.progress}%` }"
+          />
+        </div>
+        <button
+          type="button"
+          class="datametria-upload__remove"
+          @click="removeFile(file)"
+        >
+          ×
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+interface UploadFile {
+  uid: string
+  name: string
+  size: number
+  status: 'ready' | 'uploading' | 'success' | 'error'
+  progress: number
+  preview?: string
+  raw: File
+}
+
+interface Props {
+  modelValue?: UploadFile[]
+  action?: string
+  accept?: string
+  multiple?: boolean
+  limit?: number
+  maxSize?: number
+  drag?: boolean
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [],
+  action: '',
+  accept: '',
+  multiple: false,
+  limit: 0,
+  maxSize: 0,
+  drag: false,
+  disabled: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [files: UploadFile[]]
+  change: [files: UploadFile[]]
+  exceed: [files: File[]]
+  error: [error: Error, file: File]
+  success: [response: any, file: UploadFile]
+}>()
+
+const inputRef = ref<HTMLInputElement>()
+const isDragOver = ref(false)
+const fileList = ref<UploadFile[]>(props.modelValue)
+let uidCounter = 0
+
+const triggerUpload = () => {
+  inputRef.value?.click()
+}
+
+const handleChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const files = Array.from(target.files || [])
+  handleFiles(files)
+  target.value = ''
+}
+
+const handleDrop = (event: DragEvent) => {
+  isDragOver.value = false
+  const files = Array.from(event.dataTransfer?.files || [])
+  handleFiles(files)
+}
+
+const handleFiles = (files: File[]) => {
+  if (props.disabled) return
+
+  if (props.limit && fileList.value.length + files.length > props.limit) {
+    emit('exceed', files)
+    return
+  }
+
+  files.forEach(file => {
+    if (props.maxSize && file.size > props.maxSize) {
+      emit('error', new Error('File size exceeds limit'), file)
+      return
+    }
+
+    if (props.accept && !validateFileType(file)) {
+      emit('error', new Error('Invalid file type'), file)
+      return
+    }
+
+    const uploadFile: UploadFile = {
+      uid: `upload-${Date.now()}-${uidCounter++}`,
+      name: file.name,
+      size: file.size,
+      status: 'ready',
+      progress: 0,
+      raw: file
+    }
+
+    if (file.type.startsWith('image/')) {
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        uploadFile.preview = e.target?.result as string
+      }
+      reader.readAsDataURL(file)
+    }
+
+    fileList.value.push(uploadFile)
+
+    if (props.action) {
+      uploadFile.status = 'uploading'
+      simulateUpload(uploadFile)
+    }
+  })
+
+  emit('update:modelValue', fileList.value)
+  emit('change', fileList.value)
+}
+
+const validateFileType = (file: File): boolean => {
+  const acceptTypes = props.accept.split(',').map(t => t.trim())
+  return acceptTypes.some(type => {
+    if (type.startsWith('.')) {
+      return file.name.toLowerCase().endsWith(type.toLowerCase())
+    }
+    if (type.endsWith('/*')) {
+      return file.type.startsWith(type.replace('/*', ''))
+    }
+    return file.type === type
+  })
+}
+
+const simulateUpload = (file: UploadFile) => {
+  const interval = setInterval(() => {
+    file.progress += 10
+    if (file.progress >= 100) {
+      clearInterval(interval)
+      file.status = 'success'
+      emit('success', { status: 'success' }, file)
+    }
+  }, 100)
+}
+
+const removeFile = (file: UploadFile) => {
+  const index = fileList.value.indexOf(file)
+  if (index > -1) {
+    fileList.value.splice(index, 1)
+    emit('update:modelValue', fileList.value)
+    emit('change', fileList.value)
+  }
+}
+
+const formatSize = (bytes: number): string => {
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`
+}
+
+defineExpose({
+  clearFiles: () => {
+    fileList.value = []
+    emit('update:modelValue', [])
+  }
+})
+</script>
+
+<style scoped>
+.datametria-upload {
+  width: 100%;
+}
+
+.datametria-upload__drag {
+  position: relative;
+  border: 2px dashed var(--datametria-border-color, #dcdfe6);
+  border-radius: 4px;
+  padding: 40px;
+  text-align: center;
+  cursor: pointer;
+  transition: border-color 0.2s;
+}
+
+.datametria-upload__drag:hover {
+  border-color: var(--datametria-primary-color, #0072ce);
+}
+
+.datametria-upload__drag--over {
+  border-color: var(--datametria-primary-color, #0072ce);
+  background-color: var(--datametria-primary-light-color, #ecf5ff);
+}
+
+.datametria-upload__drag-content {
+  color: var(--datametria-text-color, #303133);
+}
+
+.datametria-upload__button {
+  position: relative;
+  display: inline-block;
+}
+
+.datametria-upload__button button {
+  padding: 8px 16px;
+  border: 1px solid var(--datametria-border-color, #dcdfe6);
+  border-radius: 4px;
+  background-color: var(--datametria-bg-color, #ffffff);
+  color: var(--datametria-text-color, #303133);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.datametria-upload__button button:hover {
+  border-color: var(--datametria-primary-color, #0072ce);
+  color: var(--datametria-primary-color, #0072ce);
+}
+
+.datametria-upload__input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.datametria-upload--disabled .datametria-upload__input {
+  cursor: not-allowed;
+}
+
+.datametria-upload__list {
+  margin-top: 12px;
+}
+
+.datametria-upload__item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px;
+  border: 1px solid var(--datametria-border-color, #dcdfe6);
+  border-radius: 4px;
+  margin-bottom: 8px;
+}
+
+.datametria-upload__preview {
+  width: 60px;
+  height: 60px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+.datametria-upload__info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.datametria-upload__name {
+  font-size: 14px;
+  color: var(--datametria-text-color, #303133);
+}
+
+.datametria-upload__size {
+  font-size: 12px;
+  color: var(--datametria-info-color, #909399);
+}
+
+.datametria-upload__progress {
+  width: 100%;
+  height: 4px;
+  background-color: var(--datametria-border-color, #dcdfe6);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.datametria-upload__progress-bar {
+  height: 100%;
+  background-color: var(--datametria-primary-color, #0072ce);
+  transition: width 0.3s;
+}
+
+.datametria-upload__remove {
+  padding: 4px 8px;
+  border: none;
+  background: none;
+  color: var(--datametria-danger-color, #f56c6c);
+  font-size: 20px;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.datametria-upload__remove:hover {
+  color: var(--datametria-danger-hover-color, #f78989);
+}
+
+/* Dark Mode Support - Hybrid Approach */
+
+/* Fallback automático (sem JS) */
+@media (prefers-color-scheme: dark) {
+  .datametria-upload {
+    background: var(--dm-bg-color-dark, #1e1e1e);
+    color: var(--dm-text-primary-dark, #e0e0e0);
+    border-color: var(--dm-border-color-dark, #404040);
   }
 }
 
-const formatSize = (bytes: number): string => {
-  if (bytes === 0) return '0 B'
-  const k = 1024
-  const sizes = ['B', 'KB', 'MB', 'GB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`
-}
-
-defineExpose({
-  clearFiles: () => {
-    fileList.value = []
-    emit('update:modelValue', [])
-  }
-})
-</script>
-
-<style scoped>
-.datametria-upload {
-  width: 100%;
-}
-
-.datametria-upload__drag {
-  position: relative;
-  border: 2px dashed var(--datametria-border-color, #dcdfe6);
-  border-radius: 4px;
-  padding: 40px;
-  text-align: center;
-  cursor: pointer;
-  transition: border-color 0.2s;
-}
-
-.datametria-upload__drag:hover {
-  border-color: var(--datametria-primary-color, #0072ce);
-}
-
-.datametria-upload__drag--over {
-  border-color: var(--datametria-primary-color, #0072ce);
-  background-color: var(--datametria-primary-light-color, #ecf5ff);
-}
-
-.datametria-upload__drag-content {
-  color: var(--datametria-text-color, #303133);
-}
-
-.datametria-upload__button {
-  position: relative;
-  display: inline-block;
-}
-
-.datametria-upload__button button {
-  padding: 8px 16px;
-  border: 1px solid var(--datametria-border-color, #dcdfe6);
-  border-radius: 4px;
-  background-color: var(--datametria-bg-color, #ffffff);
-  color: var(--datametria-text-color, #303133);
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.datametria-upload__button button:hover {
-  border-color: var(--datametria-primary-color, #0072ce);
-  color: var(--datametria-primary-color, #0072ce);
-}
-
-.datametria-upload__input {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: pointer;
-}
-
-.datametria-upload--disabled .datametria-upload__input {
-  cursor: not-allowed;
-}
-
-.datametria-upload__list {
-  margin-top: 12px;
-}
-
-.datametria-upload__item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px;
-  border: 1px solid var(--datametria-border-color, #dcdfe6);
-  border-radius: 4px;
-  margin-bottom: 8px;
-}
-
-.datametria-upload__preview {
-  width: 60px;
-  height: 60px;
-  object-fit: cover;
-  border-radius: 4px;
-}
-
-.datametria-upload__info {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.datametria-upload__name {
-  font-size: 14px;
-  color: var(--datametria-text-color, #303133);
-}
-
-.datametria-upload__size {
-  font-size: 12px;
-  color: var(--datametria-info-color, #909399);
-}
-
-.datametria-upload__progress {
-  width: 100%;
-  height: 4px;
-  background-color: var(--datametria-border-color, #dcdfe6);
-  border-radius: 2px;
-  overflow: hidden;
-}
-
-.datametria-upload__progress-bar {
-  height: 100%;
-  background-color: var(--datametria-primary-color, #0072ce);
-  transition: width 0.3s;
-}
-
-.datametria-upload__remove {
-  padding: 4px 8px;
-  border: none;
-  background: none;
-  color: var(--datametria-danger-color, #f56c6c);
-  font-size: 20px;
-  cursor: pointer;
-  transition: color 0.2s;
-}
-
-.datametria-upload__remove:hover {
-  color: var(--datametria-danger-hover-color, #f78989);
+/* Controle manual via useTheme() */
+[data-theme="dark"] .datametria-upload {
+  background: var(--dm-bg-color-dark, #1e1e1e);
+  color: var(--dm-text-primary-dark, #e0e0e0);
+  border-color: var(--dm-border-color-dark, #404040);
 }
-</style>
+</style>