@datametria/vue-components 2.2.0 → 2.3.0

package/src/components/DatametriaTreeNode.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="datametria-tree-node" role="treeitem" :aria-expanded="isExpanded">
+    <div
+      class="datametria-tree-node__content"
+      :class="{ 'is-leaf': isLeaf }"
+      @click="handleClick"
+    >
+      <span
+        v-if="!isLeaf"
+        class="datametria-tree-node__expand"
+        @click.stop="handleToggle"
+      >
+        <span class="datametria-tree-node__icon">{{ isExpanded ? '▼' : '▶' }}</span>
+      </span>
+      <span v-else class="datametria-tree-node__expand datametria-tree-node__expand--leaf"></span>
+
+      <input
+        v-if="checkable"
+        type="checkbox"
+        class="datametria-tree-node__checkbox"
+        :checked="isChecked"
+        @change="handleCheckChange"
+        @click.stop
+      />
+
+      <span class="datametria-tree-node__label">
+        {{ node.label || node.name || node[nodeKey] }}
+      </span>
+    </div>
+
+    <div v-if="hasChildren && isExpanded" class="datametria-tree-node__children">
+      <DatametriaTreeNode
+        v-for="child in node.children"
+        :key="getChildKey(child)"
+        :node="child"
+        :node-key="nodeKey"
+        :checkable="checkable"
+        :default-expand-all="defaultExpandAll"
+        :expanded-keys="expandedKeys"
+        :checked-keys="checkedKeys"
+        @toggle="$emit('toggle', $event)"
+        @check="(node, checked) => $emit('check', node, checked)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { TreeNode } from './DatametriaTree.vue'
+
+interface Props {
+  node: TreeNode
+  nodeKey: string
+  checkable: boolean
+  defaultExpandAll: boolean
+  expandedKeys: Set<string | number>
+  checkedKeys: Set<string | number>
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  toggle: [node: TreeNode]
+  check: [node: TreeNode, checked: boolean]
+}>()
+
+const nodeKeyValue = computed(() => props.node[props.nodeKey])
+
+const hasChildren = computed(() => {
+  return props.node.children && props.node.children.length > 0
+})
+
+const isLeaf = computed(() => !hasChildren.value)
+
+const isExpanded = computed(() => {
+  return props.expandedKeys.has(nodeKeyValue.value)
+})
+
+const isChecked = computed(() => {
+  return props.checkedKeys.has(nodeKeyValue.value)
+})
+
+const getChildKey = (child: TreeNode): string | number => {
+  return child[props.nodeKey]
+}
+
+const handleToggle = () => {
+  emit('toggle', props.node)
+}
+
+const handleClick = () => {
+  if (!isLeaf.value) {
+    handleToggle()
+  }
+}
+
+const handleCheckChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  emit('check', props.node, target.checked)
+}
+</script>
+
+<style scoped>
+.datametria-tree-node {
+  user-select: none;
+}
+
+.datametria-tree-node__content {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.datametria-tree-node__content:hover {
+  background-color: var(--dm-color-background-hover, #f5f5f5);
+}
+
+.datametria-tree-node__content.is-leaf {
+  padding-left: 24px;
+}
+
+.datametria-tree-node__expand {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-right: 4px;
+  cursor: pointer;
+}
+
+.datametria-tree-node__expand--leaf {
+  cursor: default;
+}
+
+.datametria-tree-node__icon {
+  font-size: 10px;
+  color: var(--dm-color-text-secondary, #666);
+  transition: transform 0.2s;
+}
+
+.datametria-tree-node__checkbox {
+  margin-right: 8px;
+  cursor: pointer;
+}
+
+.datametria-tree-node__label {
+  flex: 1;
+  font-size: var(--dm-font-size-base, 14px);
+  color: var(--dm-color-text, #333);
+}
+
+.datametria-tree-node__children {
+  padding-left: 20px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .datametria-tree-node__content:hover {
+    background-color: var(--dm-color-background-hover-dark, #2a2a2a);
+  }
+
+  .datametria-tree-node__icon {
+    color: var(--dm-color-text-secondary-dark, #999);
+  }
+
+  .datametria-tree-node__label {
+    color: var(--dm-color-text-dark, #e0e0e0);
+  }
+}
+</style>

package/src/components/DatametriaUpload.vue

@@ -0,0 +1,365 @@
+<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);
+}
+</style>

package/src/index.ts

@@ -1,20 +1,26 @@
 // Components - Form
 export { default as DatametriaButton } from './components/DatametriaButton.vue'
-export { default as DatametriaInput } from './components/DatametriaInput.vue'
+export { default as DatametriaInput } from './components/DatametriaInput.vue' // v2.3.0
 export { default as DatametriaPasswordInput } from './components/DatametriaPasswordInput.vue'
-export { default as DatametriaSelect } from './components/DatametriaSelect.vue'
-export { default as DatametriaCheckbox } from './components/DatametriaCheckbox.vue'
-export { default as DatametriaRadio } from './components/DatametriaRadio.vue'
-export { default as DatametriaSwitch } from './components/DatametriaSwitch.vue'
-export { default as DatametriaTextarea } from './components/DatametriaTextarea.vue'
-export { default as DatametriaDatePicker } from './components/DatametriaDatePicker.vue'
-export { default as DatametriaTimePicker } from './components/DatametriaTimePicker.vue'
+export { default as DatametriaSelect } from './components/DatametriaSelect.vue' // v2.3.0
+export { default as DatametriaCheckbox } from './components/DatametriaCheckbox.vue' // v2.3.0
+export { default as DatametriaCheckboxGroup } from './components/DatametriaCheckboxGroup.vue' // v2.3.0
+export { default as DatametriaRadio } from './components/DatametriaRadio.vue' // v2.3.0
+export { default as DatametriaRadioGroup } from './components/DatametriaRadioGroup.vue' // v2.3.0
+export { default as DatametriaSwitch } from './components/DatametriaSwitch.vue' // v2.3.0
+export { default as DatametriaTextarea } from './components/DatametriaTextarea.vue' // v2.3.0
+export { default as DatametriaDatePicker } from './components/DatametriaDatePicker.vue' // v2.3.0
+export { default as DatametriaTimePicker } from './components/DatametriaTimePicker.vue' // v2.3.0
 export { default as DatametriaSlider } from './components/DatametriaSlider.vue'
 export { default as DatametriaFileUpload } from './components/DatametriaFileUpload.vue'
-export { default as DatametriaAutocomplete } from './components/DatametriaAutocomplete.vue'
+export { default as DatametriaUpload } from './components/DatametriaUpload.vue' // v2.3.0
+export { default as DatametriaAutocomplete } from './components/DatametriaAutocomplete.vue' // v2.3.0
+export { default as DatametriaForm } from './components/DatametriaForm.vue' // v2.3.0
+export { default as DatametriaFormItem } from './components/DatametriaFormItem.vue' // v2.3.0
 
 // Components - Layout
 export { default as DatametriaCard } from './components/DatametriaCard.vue'
+export { default as DatametriaDialog } from './components/DatametriaDialog.vue'
 export { default as DatametriaModal } from './components/DatametriaModal.vue'
 export { default as DatametriaContainer } from './components/DatametriaContainer.vue'
 export { default as DatametriaGrid } from './components/DatametriaGrid.vue'
@@ -24,13 +30,19 @@ export { default as DatametriaDivider } from './components/DatametriaDivider.vue
 export { default as DatametriaAlert } from './components/DatametriaAlert.vue'
 export { default as DatametriaToast } from './components/DatametriaToast.vue'
 export { default as DatametriaTooltip } from './components/DatametriaTooltip.vue'
-export { default as DatametriaSkeleton } from './components/DatametriaSkeleton.vue'
-export { default as DatametriaProgress } from './components/DatametriaProgress.vue'
+export { default as DatametriaSkeleton } from './components/DatametriaSkeleton.vue' // v2.3.0
+export { default as DatametriaProgress } from './components/DatametriaProgress.vue' // v2.3.0
+export { default as DatametriaResult } from './components/DatametriaResult.vue' // v2.3.0
+export { default as DatametriaPopconfirm } from './components/DatametriaPopconfirm.vue' // v2.3.0
 export { default as DatametriaSpinner } from './components/DatametriaSpinner.vue'
 
 // Components - Data Display
 export { default as DatametriaTable } from './components/DatametriaTable.vue'
 export { default as DatametriaSortableTable } from './components/DatametriaSortableTable.vue'
+export { default as DatametriaDataTable } from './components/DatametriaDataTable.vue' // v2.3.0
+export { default as DatametriaPagination } from './components/DatametriaPagination.vue' // v2.3.0
+export { default as DatametriaTree } from './components/DatametriaTree.vue' // v2.3.0
+export { default as DatametriaEmpty } from './components/DatametriaEmpty.vue' // v2.3.0
 export { default as DatametriaAvatar } from './components/DatametriaAvatar.vue'
 export { default as DatametriaBadge } from './components/DatametriaBadge.vue'
 export { default as DatametriaChip } from './components/DatametriaChip.vue'
@@ -41,7 +53,9 @@ export { default as DatametriaSidebar } from './components/DatametriaSidebar.vue
 export { default as DatametriaFloatingBar } from './components/DatametriaFloatingBar.vue'
 export { default as DatametriaMenu } from './components/DatametriaMenu.vue'
 export { default as DatametriaBreadcrumb } from './components/DatametriaBreadcrumb.vue'
+export { default as DatametriaSteps } from './components/DatametriaSteps.vue' // v2.3.0
 export { default as DatametriaTabs } from './components/DatametriaTabs.vue'
+export { default as DatametriaTabPane } from './components/DatametriaTabPane.vue' // v2.3.0
 
 // Composables - Core
 export { useValidation, required, email, minLength, maxLength, pattern, custom } from './composables/useValidation'