@datametria/vue-components 2.2.0 → 2.3.0

package/src/components/DatametriaDataTable.vue

@@ -0,0 +1,304 @@
+<template>
+  <div class="datametria-datatable" :class="{ 'datametria-datatable--stripe': stripe, 'datametria-datatable--border': border }">
+    <div v-if="loading" class="datametria-datatable__loading">Carregando...</div>
+    <table class="datametria-datatable__table" :style="{ height }">
+      <thead class="datametria-datatable__header">
+        <tr>
+          <th v-if="selectable" class="datametria-datatable__cell datametria-datatable__cell--checkbox">
+            <input
+              v-if="multiple"
+              type="checkbox"
+              :checked="isAllSelected"
+              @change="toggleAll"
+            />
+          </th>
+          <th v-if="expandable" class="datametria-datatable__cell datametria-datatable__cell--expand"></th>
+          <th
+            v-for="column in columns"
+            :key="column.prop"
+            class="datametria-datatable__cell"
+            :class="{ 'datametria-datatable__cell--sortable': column.sortable }"
+            :style="{ width: column.width, minWidth: column.minWidth }"
+            @click="column.sortable && handleSort(column.prop)"
+          >
+            {{ column.label }}
+            <span v-if="column.sortable && sortBy === column.prop" class="datametria-datatable__sort-icon">
+              {{ sortOrder === 'asc' ? '↑' : '↓' }}
+            </span>
+          </th>
+        </tr>
+      </thead>
+      <tbody class="datametria-datatable__body">
+        <template v-for="(row, index) in displayData" :key="row[rowKey] || index">
+          <tr
+            class="datametria-datatable__row"
+            :class="{ 'datametria-datatable__row--selected': isSelected(row) }"
+            @click="handleRowClick(row)"
+          >
+            <td v-if="selectable" class="datametria-datatable__cell datametria-datatable__cell--checkbox">
+              <input
+                type="checkbox"
+                :checked="isSelected(row)"
+                @click.stop
+                @change="toggleSelection(row)"
+              />
+            </td>
+            <td v-if="expandable" class="datametria-datatable__cell datametria-datatable__cell--expand">
+              <button @click.stop="toggleExpand(row)">
+                {{ isExpanded(row) ? '−' : '+' }}
+              </button>
+            </td>
+            <td
+              v-for="column in columns"
+              :key="column.prop"
+              class="datametria-datatable__cell"
+            >
+              <slot :name="`cell-${column.prop}`" :row="row" :column="column">
+                {{ row[column.prop] }}
+              </slot>
+            </td>
+          </tr>
+          <tr v-if="expandable && isExpanded(row)" class="datametria-datatable__expand-row">
+            <td :colspan="totalColumns">
+              <slot name="expand" :row="row">
+                {{ row }}
+              </slot>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+interface Column {
+  prop: string
+  label: string
+  sortable?: boolean
+  width?: string
+  minWidth?: string
+}
+
+interface Props {
+  data: any[]
+  columns: Column[]
+  loading?: boolean
+  stripe?: boolean
+  border?: boolean
+  height?: string
+  rowKey?: string
+  selectable?: boolean
+  multiple?: boolean
+  expandable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  data: () => [],
+  columns: () => [],
+  loading: false,
+  stripe: false,
+  border: false,
+  height: 'auto',
+  rowKey: 'id',
+  selectable: false,
+  multiple: false,
+  expandable: false
+})
+
+const emit = defineEmits<{
+  'selection-change': [selection: any[]]
+  'row-click': [row: any]
+  'sort-change': [prop: string, order: 'asc' | 'desc']
+}>()
+
+const sortBy = ref<string>('')
+const sortOrder = ref<'asc' | 'desc'>('asc')
+const selectedRows = ref<any[]>([])
+const expandedRows = ref<Set<any>>(new Set())
+
+const totalColumns = computed(() => {
+  let count = props.columns.length
+  if (props.selectable) count++
+  if (props.expandable) count++
+  return count
+})
+
+const displayData = computed(() => {
+  let result = [...props.data]
+  
+  if (sortBy.value) {
+    result.sort((a, b) => {
+      const aVal = a[sortBy.value]
+      const bVal = b[sortBy.value]
+      
+      if (aVal === bVal) return 0
+      
+      const comparison = aVal > bVal ? 1 : -1
+      return sortOrder.value === 'asc' ? comparison : -comparison
+    })
+  }
+  
+  return result
+})
+
+const isAllSelected = computed(() => {
+  return props.data.length > 0 && selectedRows.value.length === props.data.length
+})
+
+const handleSort = (prop: string) => {
+  if (sortBy.value === prop) {
+    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
+  } else {
+    sortBy.value = prop
+    sortOrder.value = 'asc'
+  }
+  emit('sort-change', prop, sortOrder.value)
+}
+
+const isSelected = (row: any): boolean => {
+  return selectedRows.value.some(r => r[props.rowKey] === row[props.rowKey])
+}
+
+const toggleSelection = (row: any) => {
+  const index = selectedRows.value.findIndex(r => r[props.rowKey] === row[props.rowKey])
+  
+  if (index > -1) {
+    selectedRows.value.splice(index, 1)
+  } else {
+    if (props.multiple) {
+      selectedRows.value.push(row)
+    } else {
+      selectedRows.value = [row]
+    }
+  }
+  
+  emit('selection-change', selectedRows.value)
+}
+
+const toggleAll = () => {
+  if (isAllSelected.value) {
+    selectedRows.value = []
+  } else {
+    selectedRows.value = [...props.data]
+  }
+  emit('selection-change', selectedRows.value)
+}
+
+const handleRowClick = (row: any) => {
+  emit('row-click', row)
+}
+
+const isExpanded = (row: any): boolean => {
+  return expandedRows.value.has(row[props.rowKey])
+}
+
+const toggleExpand = (row: any) => {
+  const key = row[props.rowKey]
+  if (expandedRows.value.has(key)) {
+    expandedRows.value.delete(key)
+  } else {
+    expandedRows.value.add(key)
+  }
+}
+
+defineExpose({
+  clearSelection: () => {
+    selectedRows.value = []
+    emit('selection-change', [])
+  },
+  toggleRowSelection: (row: any) => toggleSelection(row),
+  clearSort: () => {
+    sortBy.value = ''
+    sortOrder.value = 'asc'
+  }
+})
+</script>
+
+<style scoped>
+.datametria-datatable {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.datametria-datatable__loading {
+  padding: 20px;
+  text-align: center;
+  color: var(--datametria-info-color, #909399);
+}
+
+.datametria-datatable__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+.datametria-datatable__header {
+  background-color: var(--datametria-bg-color-light, #fafafa);
+}
+
+.datametria-datatable__cell {
+  padding: 12px;
+  text-align: left;
+  color: var(--datametria-text-color, #303133);
+}
+
+.datametria-datatable__header .datametria-datatable__cell {
+  font-weight: 600;
+  border-bottom: 1px solid var(--datametria-border-color, #dcdfe6);
+}
+
+.datametria-datatable__cell--sortable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.datametria-datatable__cell--sortable:hover {
+  background-color: var(--datametria-hover-bg-color, #f5f7fa);
+}
+
+.datametria-datatable__sort-icon {
+  margin-left: 4px;
+  color: var(--datametria-primary-color, #0072ce);
+}
+
+.datametria-datatable__cell--checkbox {
+  width: 40px;
+  text-align: center;
+}
+
+.datametria-datatable__cell--expand {
+  width: 40px;
+  text-align: center;
+}
+
+.datametria-datatable__row {
+  transition: background-color 0.2s;
+}
+
+.datametria-datatable__row:hover {
+  background-color: var(--datametria-hover-bg-color, #f5f7fa);
+}
+
+.datametria-datatable__row--selected {
+  background-color: var(--datametria-primary-light-color, #ecf5ff);
+}
+
+.datametria-datatable--stripe .datametria-datatable__row:nth-child(even) {
+  background-color: var(--datametria-bg-color-light, #fafafa);
+}
+
+.datametria-datatable--border .datametria-datatable__cell {
+  border: 1px solid var(--datametria-border-color, #dcdfe6);
+}
+
+.datametria-datatable__expand-row {
+  background-color: var(--datametria-bg-color-light, #fafafa);
+}
+
+.datametria-datatable__expand-row td {
+  padding: 20px;
+}
+</style>