@datametria/vue-components 1.2.0 → 2.0.1

package/src/components/DatametriaSortableTable.vue

@@ -0,0 +1,585 @@
+<template>
+  <div class="datametria-sortable-table">
+    <!-- Search Bar -->
+    <div v-if="searchable" class="datametria-sortable-table__search">
+      <input
+        v-model="searchQuery"
+        type="text"
+        placeholder="Buscar..."
+        class="datametria-sortable-table__search-input"
+        aria-label="Buscar na tabela"
+      />
+    </div>
+
+    <!-- Table -->
+    <div class="datametria-sortable-table__wrapper">
+      <table class="datametria-sortable-table__table" role="table">
+        <thead class="datametria-sortable-table__thead">
+          <tr role="row">
+            <!-- Selection Column -->
+            <th 
+              v-if="selectable" 
+              class="datametria-sortable-table__th datametria-sortable-table__th--checkbox"
+              role="columnheader"
+            >
+              <input
+                type="checkbox"
+                :checked="isAllSelected"
+                :indeterminate="isIndeterminate"
+                aria-label="Selecionar todas as linhas"
+                @change="toggleSelectAll"
+              />
+            </th>
+
+            <!-- Data Columns -->
+            <th
+              v-for="column in columns"
+              :key="column.key"
+              class="datametria-sortable-table__th"
+              :class="{ 'datametria-sortable-table__th--sortable': column.sortable !== false }"
+              :style="{ width: column.width }"
+              role="columnheader"
+              :aria-sort="sortKey === column.key ? (sortOrder === 'asc' ? 'ascending' : 'descending') : 'none'"
+              @click="column.sortable !== false && toggleSort(column.key)"
+              @keydown.enter="column.sortable !== false && toggleSort(column.key)"
+              @keydown.space.prevent="column.sortable !== false && toggleSort(column.key)"
+              :tabindex="column.sortable !== false ? 0 : undefined"
+            >
+              <div class="datametria-sortable-table__th-content">
+                <span>{{ column.label }}</span>
+                <span v-if="column.sortable !== false" class="datametria-sortable-table__sort-icon" aria-hidden="true">
+                  <span v-if="sortKey === column.key">
+                    {{ sortOrder === 'asc' ? '↑' : '↓' }}
+                  </span>
+                  <span v-else class="datametria-sortable-table__sort-icon--inactive">↕</span>
+                </span>
+              </div>
+
+              <!-- Column Filter -->
+              <input
+                v-if="filterable && column.filterable !== false"
+                v-model="columnFilters[column.key]"
+                type="text"
+                :placeholder="`Filtrar ${column.label}...`"
+                :aria-label="`Filtrar por ${column.label}`"
+                class="datametria-sortable-table__filter-input"
+                @click.stop
+              />
+            </th>
+          </tr>
+        </thead>
+
+        <tbody class="datametria-sortable-table__tbody">
+          <tr
+            v-for="(row, index) in paginatedData"
+            :key="row.id || index"
+            class="datametria-sortable-table__tr"
+            :class="{ 'datametria-sortable-table__tr--selected': selectedRows.has(row.id || index) }"
+            role="row"
+          >
+            <!-- Selection Column -->
+            <td 
+              v-if="selectable" 
+              class="datametria-sortable-table__td datametria-sortable-table__td--checkbox"
+              role="cell"
+            >
+              <input
+                type="checkbox"
+                :checked="selectedRows.has(row.id || index)"
+                :aria-label="`Selecionar linha ${index + 1}`"
+                @change="toggleSelectRow(row.id || index)"
+              />
+            </td>
+
+            <!-- Data Columns -->
+            <td
+              v-for="column in columns"
+              :key="column.key"
+              class="datametria-sortable-table__td"
+              role="cell"
+            >
+              <slot :name="`cell-${column.key}`" :row="row" :value="row[column.key]">
+                {{ row[column.key] }}
+              </slot>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- Empty State -->
+      <div v-if="filteredData.length === 0" class="datametria-sortable-table__empty" role="status">
+        <slot name="empty">Nenhum dado encontrado</slot>
+      </div>
+    </div>
+
+    <!-- Pagination -->
+    <div 
+      v-if="paginated && filteredData.length > 0" 
+      class="datametria-sortable-table__pagination"
+      role="navigation"
+      aria-label="Paginação da tabela"
+    >
+      <div class="datametria-sortable-table__pagination-info" aria-live="polite">
+        Mostrando {{ startIndex + 1 }} - {{ endIndex }} de {{ filteredData.length }} registros
+        <span v-if="selectedRows.size > 0">({{ selectedRows.size }} selecionados)</span>
+      </div>
+
+      <div class="datametria-sortable-table__pagination-controls">
+        <select 
+          v-model.number="currentPageSize" 
+          class="datametria-sortable-table__page-size"
+          aria-label="Itens por página"
+        >
+          <option v-for="size in pageSizeOptions" :key="size" :value="size">
+            {{ size }} por página
+          </option>
+        </select>
+
+        <button
+          class="datametria-sortable-table__pagination-btn"
+          :disabled="currentPage === 1"
+          aria-label="Primeira página"
+          @click="currentPage = 1"
+        >
+          ««
+        </button>
+        <button
+          class="datametria-sortable-table__pagination-btn"
+          :disabled="currentPage === 1"
+          aria-label="Página anterior"
+          @click="currentPage--"
+        >
+          ‹
+        </button>
+
+        <span class="datametria-sortable-table__pagination-pages" aria-current="page">
+          Página {{ currentPage }} de {{ totalPages }}
+        </span>
+
+        <button
+          class="datametria-sortable-table__pagination-btn"
+          :disabled="currentPage === totalPages"
+          aria-label="Próxima página"
+          @click="currentPage++"
+        >
+          ›
+        </button>
+        <button
+          class="datametria-sortable-table__pagination-btn"
+          :disabled="currentPage === totalPages"
+          aria-label="Última página"
+          @click="currentPage = totalPages"
+        >
+          »»
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import type { SortableTableProps } from '../types'
+
+const props = withDefaults(defineProps<SortableTableProps>(), {
+  selectable: false,
+  searchable: true,
+  filterable: true,
+  paginated: true,
+  pageSize: 10,
+  pageSizeOptions: () => [5, 10, 25, 50, 100]
+})
+
+// Validação em desenvolvimento
+if (process.env.NODE_ENV === 'development') {
+  if (!props.columns || props.columns.length === 0) {
+    console.warn('[DatametriaSortableTable] No columns provided')
+  }
+  if (!props.data) {
+    console.warn('[DatametriaSortableTable] No data provided')
+  }
+}
+
+const emit = defineEmits<{
+  'selection-change': [selectedIds: (string | number)[]]
+}>()
+
+// Search
+const searchQuery = ref('')
+
+// Sorting
+const sortKey = ref<string>('')
+const sortOrder = ref<'asc' | 'desc'>('asc')
+
+// Filtering
+const columnFilters = ref<Record<string, string>>({})
+
+// Selection
+const selectedRows = ref<Set<string | number>>(new Set())
+
+// Pagination
+const currentPage = ref(1)
+const currentPageSize = ref(props.pageSize)
+
+// Computed: Filtered Data
+const filteredData = computed(() => {
+  let result = [...props.data]
+
+  // Global search
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase()
+    result = result.filter(row =>
+      Object.values(row).some(value =>
+        String(value).toLowerCase().includes(query)
+      )
+    )
+  }
+
+  // Column filters
+  Object.entries(columnFilters.value).forEach(([key, filterValue]) => {
+    if (filterValue) {
+      const query = filterValue.toLowerCase()
+      result = result.filter(row =>
+        String(row[key]).toLowerCase().includes(query)
+      )
+    }
+  })
+
+  // Sorting
+  if (sortKey.value) {
+    result.sort((a, b) => {
+      const aVal = a[sortKey.value]
+      const bVal = b[sortKey.value]
+
+      if (aVal === bVal) return 0
+
+      const comparison = aVal > bVal ? 1 : -1
+      return sortOrder.value === 'asc' ? comparison : -comparison
+    })
+  }
+
+  return result
+})
+
+// Computed: Pagination
+const totalPages = computed(() =>
+  Math.ceil(filteredData.value.length / currentPageSize.value)
+)
+
+const startIndex = computed(() =>
+  (currentPage.value - 1) * currentPageSize.value
+)
+
+const endIndex = computed(() =>
+  Math.min(startIndex.value + currentPageSize.value, filteredData.value.length)
+)
+
+const paginatedData = computed(() => {
+  if (!props.paginated) return filteredData.value
+  return filteredData.value.slice(startIndex.value, endIndex.value)
+})
+
+// Computed: Selection
+const isAllSelected = computed(() =>
+  paginatedData.value.length > 0 &&
+  paginatedData.value.every(row => selectedRows.value.has(row.id || props.data.indexOf(row)))
+)
+
+const isIndeterminate = computed(() =>
+  selectedRows.value.size > 0 && !isAllSelected.value
+)
+
+// Methods: Sorting
+const toggleSort = (key: string) => {
+  if (sortKey.value === key) {
+    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
+  } else {
+    sortKey.value = key
+    sortOrder.value = 'asc'
+  }
+}
+
+// Methods: Selection
+const toggleSelectRow = (id: string | number) => {
+  if (selectedRows.value.has(id)) {
+    selectedRows.value.delete(id)
+  } else {
+    selectedRows.value.add(id)
+  }
+  emit('selection-change', Array.from(selectedRows.value))
+}
+
+const toggleSelectAll = () => {
+  if (isAllSelected.value) {
+    paginatedData.value.forEach(row => {
+      selectedRows.value.delete(row.id || props.data.indexOf(row))
+    })
+  } else {
+    paginatedData.value.forEach(row => {
+      selectedRows.value.add(row.id || props.data.indexOf(row))
+    })
+  }
+  emit('selection-change', Array.from(selectedRows.value))
+}
+
+// Watch: Reset page on filter change
+watch([searchQuery, columnFilters], () => {
+  currentPage.value = 1
+}, { deep: true })
+
+// Watch: Reset page if current page exceeds total pages
+watch(totalPages, (newTotal) => {
+  if (currentPage.value > newTotal && newTotal > 0) {
+    currentPage.value = newTotal
+  }
+})
+</script>
+
+<style scoped>
+.datametria-sortable-table {
+  width: 100%;
+  background: var(--dm-neutral-50, #ffffff);
+  border-radius: var(--dm-radius-md, 0.375rem);
+  box-shadow: var(--dm-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
+}
+
+.datametria-sortable-table__search {
+  padding: var(--dm-spacing-4, 1rem);
+  border-bottom: 1px solid var(--dm-neutral-100, #f3f4f6);
+}
+
+.datametria-sortable-table__search-input {
+  width: 100%;
+  padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-4, 1rem);
+  border: 1px solid var(--dm-neutral-200, #e5e7eb);
+  border-radius: var(--dm-radius-md, 0.375rem);
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  transition: all 0.2s ease;
+}
+
+.datametria-sortable-table__search-input:focus {
+  outline: none;
+  border-color: var(--dm-primary, #0072CE);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
+}
+
+.datametria-sortable-table__wrapper {
+  overflow-x: auto;
+}
+
+.datametria-sortable-table__table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.datametria-sortable-table__thead {
+  background: var(--dm-neutral-50, #f9fafb);
+  border-bottom: 2px solid var(--dm-neutral-200, #e5e7eb);
+}
+
+.datametria-sortable-table__th {
+  padding: var(--dm-spacing-3, 0.75rem) var(--dm-spacing-4, 1rem);
+  text-align: left;
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  font-weight: var(--dm-font-weight-semibold, 600);
+  color: var(--dm-neutral-700, #374151);
+  position: relative;
+}
+
+.datametria-sortable-table__th--sortable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.datametria-sortable-table__th--sortable:hover {
+  background: var(--dm-neutral-100, #f3f4f6);
+}
+
+.datametria-sortable-table__th--sortable:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--dm-primary, #0072CE);
+}
+
+.datametria-sortable-table__th--checkbox {
+  width: 40px;
+  padding: var(--dm-spacing-3, 0.75rem) var(--dm-spacing-2, 0.5rem);
+}
+
+.datametria-sortable-table__th-content {
+  display: flex;
+  align-items: center;
+  gap: var(--dm-spacing-2, 0.5rem);
+}
+
+.datametria-sortable-table__sort-icon {
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  color: var(--dm-primary, #0072CE);
+}
+
+.datametria-sortable-table__sort-icon--inactive {
+  color: var(--dm-neutral-400, #9ca3af);
+  opacity: 0.5;
+}
+
+.datametria-sortable-table__filter-input {
+  width: 100%;
+  margin-top: var(--dm-spacing-2, 0.5rem);
+  padding: var(--dm-spacing-2, 0.5rem);
+  border: 1px solid var(--dm-neutral-200, #e5e7eb);
+  border-radius: var(--dm-radius-md, 0.375rem);
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  font-weight: 400;
+  transition: all 0.2s ease;
+}
+
+.datametria-sortable-table__filter-input:focus {
+  outline: none;
+  border-color: var(--dm-primary, #0072CE);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
+}
+
+.datametria-sortable-table__tbody {
+  background: var(--dm-neutral-50, #ffffff);
+}
+
+.datametria-sortable-table__tr {
+  border-bottom: 1px solid var(--dm-neutral-100, #f3f4f6);
+  transition: background-color 0.2s ease;
+}
+
+.datametria-sortable-table__tr:hover {
+  background: var(--dm-neutral-50, #f9fafb);
+}
+
+.datametria-sortable-table__tr--selected {
+  background: color-mix(in srgb, var(--dm-primary, #0072CE) 10%, transparent);
+}
+
+.datametria-sortable-table__td {
+  padding: var(--dm-spacing-3, 0.75rem) var(--dm-spacing-4, 1rem);
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  color: var(--dm-neutral-900, #111827);
+}
+
+.datametria-sortable-table__td--checkbox {
+  width: 40px;
+  padding: var(--dm-spacing-3, 0.75rem) var(--dm-spacing-2, 0.5rem);
+}
+
+.datametria-sortable-table__empty {
+  padding: var(--dm-spacing-4, 1rem);
+  text-align: center;
+  color: var(--dm-neutral-500, #6b7280);
+  font-size: var(--dm-font-size-sm, 0.875rem);
+}
+
+.datametria-sortable-table__pagination {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--dm-spacing-4, 1rem);
+  border-top: 1px solid var(--dm-neutral-200, #e5e7eb);
+  flex-wrap: wrap;
+  gap: var(--dm-spacing-4, 1rem);
+}
+
+.datametria-sortable-table__pagination-info {
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  color: var(--dm-neutral-600, #4b5563);
+}
+
+.datametria-sortable-table__pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--dm-spacing-2, 0.5rem);
+}
+
+.datametria-sortable-table__page-size {
+  padding: var(--dm-spacing-2, 0.5rem);
+  border: 1px solid var(--dm-neutral-200, #e5e7eb);
+  border-radius: var(--dm-radius-md, 0.375rem);
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background: var(--dm-neutral-50, #ffffff);
+  color: var(--dm-neutral-900, #111827);
+}
+
+.datametria-sortable-table__page-size:focus {
+  outline: none;
+  border-color: var(--dm-primary, #0072CE);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
+}
+
+.datametria-sortable-table__pagination-btn {
+  padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-3, 0.75rem);
+  border: 1px solid var(--dm-neutral-200, #e5e7eb);
+  border-radius: var(--dm-radius-md, 0.375rem);
+  background: var(--dm-neutral-50, #ffffff);
+  color: var(--dm-neutral-900, #111827);
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.datametria-sortable-table__pagination-btn:hover:not(:disabled) {
+  background: var(--dm-neutral-100, #f3f4f6);
+  border-color: var(--dm-primary, #0072CE);
+}
+
+.datametria-sortable-table__pagination-btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
+}
+
+.datametria-sortable-table__pagination-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.datametria-sortable-table__pagination-pages {
+  padding: 0 var(--dm-spacing-2, 0.5rem);
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  color: var(--dm-neutral-600, #4b5563);
+}
+
+input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  accent-color: var(--dm-primary, #0072CE);
+}
+
+input[type="checkbox"]:focus-visible {
+  outline: 2px solid var(--dm-primary, #0072CE);
+  outline-offset: 2px;
+}
+
+/* Mobile Responsiveness */
+@media (max-width: 640px) {
+  .datametria-sortable-table__pagination {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .datametria-sortable-table__pagination-controls {
+    justify-content: center;
+  }
+
+  .datametria-sortable-table__th,
+  .datametria-sortable-table__td {
+    padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-3, 0.75rem);
+    font-size: calc(var(--dm-font-size-sm, 0.875rem) * 0.9);
+  }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .datametria-sortable-table__tr,
+  .datametria-sortable-table__pagination-btn,
+  .datametria-sortable-table__search-input,
+  .datametria-sortable-table__filter-input {
+    transition: none;
+  }
+}
+</style>

package/src/components/DatametriaSpinner.vue

@@ -39,7 +39,7 @@ withDefaults(defineProps<Props>(), {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--dm-space-2);
+  gap: var(--dm-spacing-2, 0.5rem);
 }
 
 .dm-spinner__svg {
@@ -67,20 +67,20 @@ withDefaults(defineProps<Props>(), {
 }
 
 .dm-spinner--primary .dm-spinner__circle {
-  stroke: var(--dm-primary);
+  stroke: var(--dm-primary, #0072CE);
 }
 
 .dm-spinner--secondary .dm-spinner__circle {
-  stroke: var(--dm-secondary);
+  stroke: var(--dm-secondary, #4B0078);
 }
 
 .dm-spinner--white .dm-spinner__circle {
-  stroke: var(--dm-white);
+  stroke: var(--dm-neutral-50, #ffffff);
 }
 
 .dm-spinner__label {
-  font-size: var(--dm-text-sm);
-  color: var(--dm-text-secondary);
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  color: var(--dm-neutral-600, #4b5563);
 }
 
 @keyframes dm-spinner-rotate {
@@ -106,7 +106,7 @@ withDefaults(defineProps<Props>(), {
 
 @media (prefers-color-scheme: dark) {
   .dm-spinner__label {
-    color: var(--dm-gray-400);
+    color: var(--dm-neutral-400, #9ca3af);
   }
 }
 </style>