@datametria/vue-components 2.3.1 → 2.4.0

package/src/components/DatametriaDataTable.vue

@@ -1,304 +1,322 @@
-<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)
+<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;
+}
+
+/* Dark Mode Support - Hybrid Approach */
+
+/* Fallback automático (sem JS) */
+@media (prefers-color-scheme: dark) {
+  .datametria-datatable {
+    background: var(--dm-bg-color-dark, #1e1e1e);
+    color: var(--dm-text-primary-dark, #e0e0e0);
+    border-color: var(--dm-border-color-dark, #404040);
   }
 }
 
-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;
+/* Controle manual via useTheme() */
+[data-theme="dark"] .datametria-datatable {
+  background: var(--dm-bg-color-dark, #1e1e1e);
+  color: var(--dm-text-primary-dark, #e0e0e0);
+  border-color: var(--dm-border-color-dark, #404040);
 }
-</style>
+</style>