@datametria/vue-components 2.1.1 → 2.3.0

package/src/components/DatametriaSortableTable.vue

@@ -56,15 +56,68 @@
               </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
-              />
+              <div v-if="filterable && column.filterable !== false" @click.stop>
+                <!-- Select Filter -->
+                <select
+                  v-if="column.filterType === 'select'"
+                  v-model="columnFilters[column.key]"
+                  :aria-label="`Filtrar por ${column.label}`"
+                  class="datametria-sortable-table__filter-input"
+                  @keydown.stop
+                >
+                  <option value="">Todos</option>
+                  <option
+                    v-for="option in getFilterOptions(column)"
+                    :key="option.value"
+                    :value="option.value"
+                  >
+                    {{ option.label }}
+                  </option>
+                </select>
+
+                <!-- Multi-Select Filter -->
+                <div
+                  v-else-if="column.filterType === 'multiselect'"
+                  class="datametria-sortable-table__multiselect"
+                >
+                  <button
+                    type="button"
+                    class="datametria-sortable-table__multiselect-trigger"
+                    @click="toggleMultiselect(column.key)"
+                  >
+                    {{ getMultiselectLabel(column) }}
+                  </button>
+                  <div
+                    v-if="activeMultiselect === column.key"
+                    class="datametria-sortable-table__multiselect-dropdown"
+                  >
+                    <label
+                      v-for="option in getFilterOptions(column)"
+                      :key="option.value"
+                      class="datametria-sortable-table__multiselect-option"
+                    >
+                      <input
+                        type="checkbox"
+                        :value="option.value"
+                        :checked="isMultiselectChecked(column.key, option.value)"
+                        @change="toggleMultiselectOption(column.key, option.value)"
+                      />
+                      {{ option.label }}
+                    </label>
+                  </div>
+                </div>
+
+                <!-- Text/Date Filter -->
+                <input
+                  v-else
+                  v-model="columnFilters[column.key]"
+                  :type="column.filterType || getFilterInputType(column)"
+                  :placeholder="`Filtrar ${column.label}...`"
+                  :aria-label="`Filtrar por ${column.label}`"
+                  class="datametria-sortable-table__filter-input"
+                  @keydown.stop
+                />
+              </div>
             </th>
           </tr>
         </thead>
@@ -204,6 +257,72 @@ const emit = defineEmits<{
   'selection-change': [selectedIds: (string | number)[]]
 }>()
 
+// Detect filter input type based on column data
+const getFilterInputType = (column: any) => {
+  if (!props.data || props.data.length === 0) return 'text'
+  
+  const sampleValue = props.data[0][column.key]
+  
+  // Check if it's a date
+  if (sampleValue instanceof Date) return 'date'
+  if (typeof sampleValue === 'string' && !isNaN(Date.parse(sampleValue))) {
+    // Check if it looks like a date string (YYYY-MM-DD, DD/MM/YYYY, etc)
+    const datePattern = /^\d{4}-\d{2}-\d{2}|\d{2}\/\d{2}\/\d{4}/
+    if (datePattern.test(sampleValue)) return 'date'
+  }
+  
+  return 'text'
+}
+
+// Get filter options (auto-generate if 'auto')
+const getFilterOptions = (column: any) => {
+  if (column.filterOptions === 'auto') {
+    const uniqueValues = new Set<string>()
+    props.data.forEach(row => {
+      const value = row[column.key]
+      if (value !== null && value !== undefined && value !== '') {
+        uniqueValues.add(String(value))
+      }
+    })
+    return Array.from(uniqueValues)
+      .sort()
+      .map(value => ({ value, label: value }))
+  }
+  return column.filterOptions || []
+}
+
+// Multi-select methods
+const toggleMultiselect = (key: string) => {
+  activeMultiselect.value = activeMultiselect.value === key ? null : key
+}
+
+const getMultiselectLabel = (column: any) => {
+  const selected = columnFilters.value[column.key] as string[] || []
+  if (selected.length === 0) return 'Todos'
+  if (selected.length === 1) {
+    const options = getFilterOptions(column)
+    const option = options.find((o: any) => o.value === selected[0])
+    return option?.label || selected[0]
+  }
+  return `${selected.length} selecionados`
+}
+
+const isMultiselectChecked = (key: string, value: string) => {
+  const selected = columnFilters.value[key] as string[] || []
+  return selected.includes(value)
+}
+
+const toggleMultiselectOption = (key: string, value: string) => {
+  const selected = (columnFilters.value[key] as string[]) || []
+  const index = selected.indexOf(value)
+  
+  if (index > -1) {
+    columnFilters.value[key] = selected.filter(v => v !== value)
+  } else {
+    columnFilters.value[key] = [...selected, value]
+  }
+}
+
 // Search
 const searchQuery = ref('')
 
@@ -212,7 +331,8 @@ const sortKey = ref<string>('')
 const sortOrder = ref<'asc' | 'desc'>('asc')
 
 // Filtering
-const columnFilters = ref<Record<string, string>>({})
+const columnFilters = ref<Record<string, string | string[]>>({})
+const activeMultiselect = ref<string | null>(null)
 
 // Selection
 const selectedRows = ref<Set<string | number>>(new Set())
@@ -238,22 +358,62 @@ const filteredData = computed(() => {
   // 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)
-      )
+      // Multi-select filter
+      if (Array.isArray(filterValue) && filterValue.length > 0) {
+        result = result.filter(row =>
+          filterValue.includes(String(row[key]))
+        )
+      }
+      // Text/Date/Select filter
+      else if (typeof filterValue === 'string') {
+        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
+      let aVal = a[sortKey.value]
+      let bVal = b[sortKey.value]
+
+      // Handle null/undefined
+      if (aVal == null && bVal == null) return 0
+      if (aVal == null) return 1
+      if (bVal == null) return -1
+
+      // Convert dates to timestamps for proper comparison
+      if (aVal instanceof Date) aVal = aVal.getTime()
+      if (bVal instanceof Date) bVal = bVal.getTime()
+      
+      // Try to parse as date if string looks like a date
+      if (typeof aVal === 'string' && !isNaN(Date.parse(aVal))) {
+        const datePattern = /^\d{4}-\d{2}-\d{2}|\d{2}\/\d{2}\/\d{4}/
+        if (datePattern.test(aVal)) {
+          aVal = new Date(aVal).getTime()
+        }
+      }
+      if (typeof bVal === 'string' && !isNaN(Date.parse(bVal))) {
+        const datePattern = /^\d{4}-\d{2}-\d{2}|\d{2}\/\d{2}\/\d{4}/
+        if (datePattern.test(bVal)) {
+          bVal = new Date(bVal).getTime()
+        }
+      }
+
+      // Numeric comparison
+      if (typeof aVal === 'number' && typeof bVal === 'number') {
+        return sortOrder.value === 'asc' ? aVal - bVal : bVal - aVal
+      }
+
+      // String comparison (case-insensitive)
+      const aStr = String(aVal).toLowerCase()
+      const bStr = String(bVal).toLowerCase()
+      
+      if (aStr === bStr) return 0
+      const comparison = aStr > bStr ? 1 : -1
       return sortOrder.value === 'asc' ? comparison : -comparison
     })
   }
@@ -438,6 +598,67 @@ watch(totalPages, (newTotal) => {
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
 }
 
+.datametria-sortable-table__multiselect {
+  position: relative;
+  margin-top: var(--dm-spacing-2, 0.5rem);
+}
+
+.datametria-sortable-table__multiselect-trigger {
+  width: 100%;
+  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;
+  text-align: left;
+  background: var(--dm-neutral-50, #ffffff);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.datametria-sortable-table__multiselect-trigger:hover {
+  border-color: var(--dm-primary, #0072CE);
+}
+
+.datametria-sortable-table__multiselect-trigger: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__multiselect-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: var(--dm-spacing-1, 0.25rem);
+  max-height: 200px;
+  overflow-y: auto;
+  background: var(--dm-neutral-50, #ffffff);
+  border: 1px solid var(--dm-neutral-200, #e5e7eb);
+  border-radius: var(--dm-radius-md, 0.375rem);
+  box-shadow: var(--dm-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
+  z-index: 10;
+}
+
+.datametria-sortable-table__multiselect-option {
+  display: flex;
+  align-items: center;
+  gap: var(--dm-spacing-2, 0.5rem);
+  padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-3, 0.75rem);
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.datametria-sortable-table__multiselect-option:hover {
+  background: var(--dm-neutral-100, #f3f4f6);
+}
+
+.datametria-sortable-table__multiselect-option input[type="checkbox"] {
+  margin: 0;
+}
+
 .datametria-sortable-table__tbody {
   background: var(--dm-neutral-50, #ffffff);
 }

package/src/components/DatametriaSteps.vue

@@ -0,0 +1,314 @@
+<template>
+  <div 
+    class="datametria-steps" 
+    :class="[
+      `datametria-steps--${direction}`,
+      { 'datametria-steps--simple': simple }
+    ]"
+  >
+    <div
+      v-for="(item, index) in items"
+      :key="index"
+      class="datametria-steps__item"
+      :class="[
+        `is-${getStepStatus(index)}`,
+        { 'is-last': index === items.length - 1 }
+      ]"
+    >
+      <div class="datametria-steps__head">
+        <div class="datametria-steps__line" v-if="index > 0">
+          <div class="datametria-steps__line-inner"></div>
+        </div>
+        <div class="datametria-steps__icon">
+          <span v-if="getStepStatus(index) === 'finish'" class="icon-check">✓</span>
+          <span v-else-if="getStepStatus(index) === 'error'" class="icon-error">✕</span>
+          <span v-else class="icon-number">{{ index + 1 }}</span>
+        </div>
+      </div>
+      <div class="datametria-steps__main">
+        <div class="datametria-steps__title">{{ item.title }}</div>
+        <div v-if="item.description" class="datametria-steps__description">
+          {{ item.description }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+/**
+ * DatametriaSteps - Componente de passos/wizard
+ * 
+ * @component
+ * @example
+ * <DatametriaSteps 
+ *   :active="1"
+ *   :items="[
+ *     { title: 'Passo 1', description: 'Descrição' },
+ *     { title: 'Passo 2' },
+ *     { title: 'Passo 3' }
+ *   ]"
+ *   direction="horizontal"
+ * />
+ */
+
+export interface StepItem {
+  /** Título do passo */
+  title: string
+  /** Descrição do passo (opcional) */
+  description?: string
+  /** Status customizado do passo */
+  status?: 'wait' | 'process' | 'finish' | 'error'
+}
+
+interface Props {
+  /** Índice do passo ativo (0-based) */
+  active?: number
+  /** Array de itens dos passos */
+  items: StepItem[]
+  /** Direção dos passos */
+  direction?: 'horizontal' | 'vertical'
+  /** Modo simples (sem descrição) */
+  simple?: boolean
+  /** Status global (sobrescreve status individual) */
+  status?: 'wait' | 'process' | 'finish' | 'error'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  active: 0,
+  direction: 'horizontal',
+  simple: false
+})
+
+const emit = defineEmits<{
+  change: [index: number]
+}>()
+
+/**
+ * Determina o status de um passo baseado no índice ativo
+ */
+const getStepStatus = (index: number): 'wait' | 'process' | 'finish' | 'error' => {
+  // Status customizado do item tem prioridade
+  if (props.items[index]?.status) {
+    return props.items[index].status!
+  }
+  
+  // Status global tem segunda prioridade
+  if (props.status) {
+    return props.status
+  }
+  
+  // Status baseado no índice ativo
+  if (index < props.active) {
+    return 'finish'
+  } else if (index === props.active) {
+    return 'process'
+  } else {
+    return 'wait'
+  }
+}
+</script>
+
+<style scoped>
+.datametria-steps {
+  display: flex;
+  font-size: 14px;
+}
+
+.datametria-steps--horizontal {
+  flex-direction: row;
+}
+
+.datametria-steps--vertical {
+  flex-direction: column;
+}
+
+.datametria-steps__item {
+  position: relative;
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+.datametria-steps--horizontal .datametria-steps__item {
+  flex-direction: column;
+}
+
+.datametria-steps--vertical .datametria-steps__item {
+  flex-direction: row;
+  padding-bottom: 24px;
+}
+
+.datametria-steps--vertical .datametria-steps__item.is-last {
+  padding-bottom: 0;
+}
+
+.datametria-steps__head {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.datametria-steps--horizontal .datametria-steps__head {
+  flex-direction: column;
+  margin-bottom: 8px;
+}
+
+.datametria-steps--vertical .datametria-steps__head {
+  flex-direction: column;
+  margin-right: 16px;
+  flex-shrink: 0;
+}
+
+.datametria-steps__icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 500;
+  border: 2px solid var(--datametria-border, #dcdfe6);
+  background: var(--datametria-bg, #fff);
+  color: var(--datametria-text-secondary, #909399);
+  transition: all 0.3s;
+  z-index: 1;
+}
+
+.datametria-steps__item.is-process .datametria-steps__icon {
+  border-color: var(--datametria-primary, #0072ce);
+  background: var(--datametria-primary, #0072ce);
+  color: #fff;
+}
+
+.datametria-steps__item.is-finish .datametria-steps__icon {
+  border-color: var(--datametria-success, #67c23a);
+  background: var(--datametria-success, #67c23a);
+  color: #fff;
+}
+
+.datametria-steps__item.is-error .datametria-steps__icon {
+  border-color: var(--datametria-danger, #f56c6c);
+  background: var(--datametria-danger, #f56c6c);
+  color: #fff;
+}
+
+.datametria-steps__line {
+  position: absolute;
+  background: var(--datametria-border, #dcdfe6);
+}
+
+.datametria-steps--horizontal .datametria-steps__line {
+  height: 2px;
+  top: 15px;
+  left: -50%;
+  right: 50%;
+}
+
+.datametria-steps--vertical .datametria-steps__line {
+  width: 2px;
+  top: 32px;
+  bottom: 0;
+  left: 15px;
+}
+
+.datametria-steps__line-inner {
+  width: 0;
+  height: 100%;
+  background: var(--datametria-primary, #0072ce);
+  transition: width 0.3s, height 0.3s;
+}
+
+.datametria-steps__item.is-finish .datametria-steps__line-inner,
+.datametria-steps__item.is-process .datametria-steps__line-inner {
+  width: 100%;
+  height: 100%;
+  background: var(--datametria-success, #67c23a);
+}
+
+.datametria-steps__item.is-error .datametria-steps__line-inner {
+  width: 100%;
+  height: 100%;
+  background: var(--datametria-danger, #f56c6c);
+}
+
+.datametria-steps__main {
+  text-align: center;
+}
+
+.datametria-steps--vertical .datametria-steps__main {
+  text-align: left;
+  flex: 1;
+}
+
+.datametria-steps__title {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--datametria-text-primary, #303133);
+  line-height: 1.5;
+}
+
+.datametria-steps__item.is-wait .datametria-steps__title {
+  color: var(--datametria-text-secondary, #909399);
+}
+
+.datametria-steps__item.is-process .datametria-steps__title {
+  color: var(--datametria-primary, #0072ce);
+}
+
+.datametria-steps__item.is-finish .datametria-steps__title {
+  color: var(--datametria-success, #67c23a);
+}
+
+.datametria-steps__item.is-error .datametria-steps__title {
+  color: var(--datametria-danger, #f56c6c);
+}
+
+.datametria-steps__description {
+  font-size: 12px;
+  color: var(--datametria-text-secondary, #909399);
+  margin-top: 4px;
+  line-height: 1.5;
+}
+
+.datametria-steps--simple .datametria-steps__description {
+  display: none;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  .datametria-steps__icon {
+    border-color: var(--datametria-border-dark, #4c4d4f);
+    background: var(--datametria-bg-dark, #1d1e1f);
+    color: var(--datametria-text-secondary-dark, #909399);
+  }
+
+  .datametria-steps__item.is-process .datametria-steps__icon {
+    border-color: var(--datametria-primary-dark, #409eff);
+    background: var(--datametria-primary-dark, #409eff);
+  }
+
+  .datametria-steps__line {
+    background: var(--datametria-border-dark, #4c4d4f);
+  }
+
+  .datametria-steps__title {
+    color: var(--datametria-text-primary-dark, #e5eaf3);
+  }
+
+  .datametria-steps__item.is-wait .datametria-steps__title {
+    color: var(--datametria-text-secondary-dark, #909399);
+  }
+
+  .datametria-steps__item.is-process .datametria-steps__title {
+    color: var(--datametria-primary-dark, #409eff);
+  }
+
+  .datametria-steps__description {
+    color: var(--datametria-text-secondary-dark, #909399);
+  }
+}
+</style>