@datametria/vue-components 2.1.0 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datametria/vue-components",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "DATAMETRIA Vue.js 3 Component Library with Multi-Brand Theming - 32 components with theming support, WCAG 2.2 AA, dark mode, responsive system",
   "type": "module",
   "main": "./dist/index.umd.js",
@@ -12,7 +12,8 @@
       "import": "./dist/index.es.js",
       "require": "./dist/index.umd.js"
     },
-    "./style.css": "./dist/style.css"
+    "./style.css": "./dist/vue-components.css",
+    "./dist/vue-components.css": "./dist/vue-components.css"
   },
   "files": [
     "dist",
@@ -59,6 +60,7 @@
     "prettier": "^3.4.0",
     "typescript": "~5.7.0",
     "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.5.4",
     "vitest": "^2.1.0",
     "vue-tsc": "^2.2.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,10 +358,19 @@ 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)
+        )
+      }
     }
   })
 
@@ -438,6 +567,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/types/index.ts

@@ -39,6 +39,8 @@ export interface TableColumn {
   width?: string
   sortable?: boolean
   filterable?: boolean
+  filterType?: 'text' | 'date' | 'select' | 'multiselect'
+  filterOptions?: Array<{ value: string; label: string }> | 'auto'
 }
 
 export interface SortableTableProps {