@datametria/vue-components 2.4.0 → 2.4.2

package/src/components/DatametriaSelect.vue

@@ -1,317 +1,413 @@
-<template>
-  <div class="datametria-select" :class="{ 'is-disabled': disabled }">
-    <!-- Label -->
-    <label v-if="label" class="datametria-select__label">
-      {{ label }}
-      <span v-if="required" class="datametria-select__required">*</span>
-    </label>
-
-    <div ref="triggerRef" class="datametria-select__trigger" @click="toggleDropdown">
-      <span v-if="displayValue" class="datametria-select__value">{{ displayValue }}</span>
-      <span v-else class="datametria-select__placeholder">{{ placeholder }}</span>
-      <span class="datametria-select__arrow">▼</span>
-      
-      <!-- Hidden select for testing -->
-      <select 
-        v-model="selectedValue" 
-        :disabled="disabled"
-        style="position: absolute; opacity: 0; pointer-events: none;"
-        @change="handleNativeChange"
-      >
-        <option value="" disabled>{{ placeholder }}</option>
-        <option 
-          v-for="option in options" 
-          :key="option.value" 
-          :value="option.value"
-        >
-          {{ option.label }}
-        </option>
-      </select>
-    </div>
-    
-    <Teleport to="body">
-      <div v-if="isOpen" class="datametria-select__dropdown" :style="dropdownStyle">
-        <input
-          v-if="filterable"
-          v-model="filterText"
-          class="datametria-select__filter"
-          placeholder="Buscar..."
-          @click.stop
-        />
-        <div class="datametria-select__options">
-          <div
-            v-for="option in filteredOptions"
-            :key="option.value"
-            class="datametria-select__option"
-            :class="{ 'is-selected': isSelected(option.value) }"
-            @click="handleSelect(option)"
-          >
-            {{ option.label }}
-          </div>
-          <div v-if="filteredOptions.length === 0" class="datametria-select__empty">
-            Nenhum resultado
-          </div>
-        </div>
-      </div>
-    </Teleport>
-
-    <!-- Error Message -->
-    <div v-if="errorMessage" class="datametria-select__error">
-      {{ errorMessage }}
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
-
-interface SelectOption {
-  label: string
-  value: any
-  disabled?: boolean
-}
-
-interface Props {
-  modelValue: any | any[]
-  options: SelectOption[]
-  /** Label do select */
-  label?: string
-  /** Campo obrigatório */
-  required?: boolean
-  /** Mensagem de erro */
-  errorMessage?: string
-  placeholder?: string
-  disabled?: boolean
-  clearable?: boolean
-  filterable?: boolean
-  multiple?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  placeholder: 'Selecione',
-  disabled: false,
-  clearable: false,
-  filterable: false,
-  multiple: false,
-  required: false
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: any]
-  'change': [value: any]
-}>()
-
-const isOpen = ref(false)
-const filterText = ref('')
-const dropdownStyle = ref({})
-const triggerRef = ref<HTMLElement>()
-
-const selectedValue = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value)
-    emit('change', value)
-  }
-})
-
-const displayValue = computed(() => {
-  if (props.multiple && Array.isArray(props.modelValue)) {
-    const labels = props.modelValue.map(v => 
-      props.options.find(o => o.value === v)?.label
-    ).filter(Boolean)
-    return labels.join(', ')
-  }
-  return props.options.find(o => o.value === props.modelValue)?.label || ''
-})
-
-const filteredOptions = computed(() => {
-  if (!props.filterable || !filterText.value) return props.options
-  return props.options.filter(o => 
-    o.label.toLowerCase().includes(filterText.value.toLowerCase())
-  )
-})
-
-const isSelected = (value: any) => {
-  if (props.multiple && Array.isArray(props.modelValue)) {
-    return props.modelValue.includes(value)
-  }
-  return props.modelValue === value
-}
-
-const toggleDropdown = () => {
-  if (!props.disabled) {
-    isOpen.value = !isOpen.value
-    if (isOpen.value && triggerRef.value) {
-      updateDropdownPosition()
-    }
-  }
-}
-
-const updateDropdownPosition = () => {
-  if (!triggerRef.value) return
-  const rect = triggerRef.value.getBoundingClientRect()
-  dropdownStyle.value = {
-    top: `${rect.bottom + window.scrollY + 4}px`,
-    left: `${rect.left + window.scrollX}px`,
-    width: `${rect.width}px`
-  }
-}
-
-const handleSelect = (option: SelectOption) => {
-  if (props.multiple) {
-    const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
-    const index = current.indexOf(option.value)
-    if (index > -1) {
-      current.splice(index, 1)
-    } else {
-      current.push(option.value)
-    }
-    emit('update:modelValue', current)
-    emit('change', current)
-  } else {
-    emit('update:modelValue', option.value)
-    emit('change', option.value)
-    isOpen.value = false
-  }
-}
-
-const handleNativeChange = (event: Event) => {
-  const target = event.target as HTMLSelectElement
-  emit('update:modelValue', target.value)
-  emit('change', target.value)
-}
-
-const handleClickOutside = (e: MouseEvent) => {
-  const target = e.target as HTMLElement
-  if (!target.closest('.datametria-select')) {
-    isOpen.value = false
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-})
-</script>
-
-<style scoped>
-.datametria-select__label {
-  display: block;
-  margin-bottom: 4px;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--color-text-primary, #1f2937);
-}
-
-.datametria-select__required {
-  color: var(--color-error, #ef4444);
-  margin-left: 2px;
-}
-
-.datametria-select__error {
-  margin-top: 4px;
-  font-size: 12px;
-  color: var(--color-error, #ef4444);
-}
-
-.datametria-select {
-  position: relative;
-  width: 100%;
-}
-
-.datametria-select__trigger {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  border: 1px solid var(--color-border, #d1d5db);
-  border-radius: 6px;
-  background: var(--color-background, #fff);
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.datametria-select__trigger:hover {
-  border-color: var(--color-primary, #3b82f6);
-}
-
-.is-disabled .datametria-select__trigger {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.datametria-select__placeholder {
-  color: var(--color-text-secondary, #9ca3af);
-}
-
-.datametria-select__arrow {
-  font-size: 12px;
-  transition: transform 0.2s;
-}
-
-.datametria-select__dropdown {
-  position: fixed;
-  z-index: 2000;
-  background: var(--color-background, #fff);
-  border: 1px solid var(--color-border, #d1d5db);
-  border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-  max-height: 300px;
-  overflow: hidden;
-}
-
-.datametria-select__filter {
-  width: 100%;
-  padding: 8px 12px;
-  border: none;
-  border-bottom: 1px solid var(--color-border, #d1d5db);
-  outline: none;
-}
-
-.datametria-select__options {
-  max-height: 250px;
-  overflow-y: auto;
-}
-
-.datametria-select__option {
-  padding: 8px 12px;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-
-.datametria-select__option:hover {
-  background: var(--color-background-hover, #f3f4f6);
-}
-
-.datametria-select__option.is-selected {
-  background: var(--color-primary-light, #dbeafe);
-  color: var(--color-primary, #3b82f6);
-}
-
-.datametria-select__empty {
-  padding: 16px;
-  text-align: center;
-  color: var(--color-text-secondary, #9ca3af);
-}
-
-/* Dark Mode Support - Hybrid Approach */
-
-/* Fallback automático (sem JS) */
-@media (prefers-color-scheme: dark) {
-  .datametria-select {
-    background: var(--dm-bg-color-dark, #1e1e1e);
-    color: var(--dm-text-primary-dark, #e0e0e0);
-    border-color: var(--dm-border-color-dark, #404040);
+<template>
+  <div class="datametria-select" :class="selectClasses">
+    <label v-if="label" :for="selectId" class="datametria-select__label">
+      {{ label }}
+      <span v-if="required" class="datametria-select__required">*</span>
+    </label>
+
+    <div
+      ref="triggerRef"
+      class="datametria-select__trigger"
+      :aria-expanded="isOpen"
+      :aria-haspopup="true"
+      :aria-disabled="disabled"
+      :aria-invalid="!!errorMessage"
+      :aria-describedby="errorMessage ? `${selectId}-error` : undefined"
+      role="combobox"
+      tabindex="0"
+      @click.stop="toggleDropdown"
+      @keydown.enter.prevent="toggleDropdown"
+      @keydown.space.prevent="toggleDropdown"
+      @keydown.escape="isOpen = false"
+    >
+      <span v-if="displayValue" class="datametria-select__value">{{ displayValue }}</span>
+      <span v-else class="datametria-select__placeholder">{{ placeholder }}</span>
+      <span class="datametria-select__arrow" :class="{ 'is-open': isOpen }">▼</span>
+      
+      <select 
+        :id="selectId"
+        v-model="selectedValue" 
+        :disabled="disabled"
+        :aria-label="label || placeholder"
+        style="position: absolute; opacity: 0; pointer-events: none;"
+        @change="handleNativeChange"
+      >
+        <option value="" disabled>{{ placeholder }}</option>
+        <option 
+          v-for="option in options" 
+          :key="option.value" 
+          :value="option.value"
+        >
+          {{ option.label }}
+        </option>
+      </select>
+    </div>
+    
+    <Teleport to="body">
+      <div
+        v-if="isOpen"
+        class="datametria-select__dropdown"
+        :style="dropdownStyle"
+        role="listbox"
+      >
+        <input
+          v-if="filterable"
+          v-model="filterText"
+          class="datametria-select__filter"
+          placeholder="Buscar..."
+          aria-label="Filtrar opções"
+          @click.stop
+        />
+        <div class="datametria-select__options">
+          <div
+            v-for="option in filteredOptions"
+            :key="option.value"
+            class="datametria-select__option"
+            :class="{ 'is-selected': isSelected(option.value) }"
+            role="option"
+            :aria-selected="isSelected(option.value)"
+            @click="handleSelect(option)"
+          >
+            {{ option.label }}
+          </div>
+          <div v-if="filteredOptions.length === 0" class="datametria-select__empty">
+            Nenhum resultado
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+    <div
+      v-if="errorMessage"
+      :id="`${selectId}-error`"
+      role="alert"
+      aria-live="polite"
+      class="datametria-select__error"
+    >
+      {{ errorMessage }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useAnalytics } from '@/composables/useAnalytics'
+
+interface SelectOption {
+  label: string
+  value: any
+  disabled?: boolean
+}
+
+interface Props {
+  modelValue: any | any[]
+  options: SelectOption[]
+  label?: string
+  required?: boolean
+  errorMessage?: string
+  placeholder?: string
+  disabled?: boolean
+  clearable?: boolean
+  filterable?: boolean
+  multiple?: boolean
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: 'Selecione',
+  disabled: false,
+  clearable: false,
+  filterable: false,
+  multiple: false,
+  required: false,
+  size: 'md'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: any]
+  'change': [value: any]
+}>()
+
+const { trackEvent } = useAnalytics()
+const isOpen = ref(false)
+const filterText = ref('')
+const dropdownStyle = ref({})
+const triggerRef = ref<HTMLElement>()
+const selectId = `datametria-select-${Math.random().toString(36).substr(2, 9)}`
+
+const selectedValue = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value)
+    emit('change', value)
+  }
+})
+
+const displayValue = computed(() => {
+  if (props.multiple && Array.isArray(props.modelValue)) {
+    const labels = props.modelValue.map(v => 
+      props.options.find(o => o.value === v)?.label
+    ).filter(Boolean)
+    return labels.join(', ')
+  }
+  return props.options.find(o => o.value === props.modelValue)?.label || ''
+})
+
+const filteredOptions = computed(() => {
+  if (!props.filterable || !filterText.value) return props.options
+  return props.options.filter(o => 
+    o.label.toLowerCase().includes(filterText.value.toLowerCase())
+  )
+})
+
+const selectClasses = computed(() => ({
+  'is-disabled': props.disabled,
+  'is-error': !!props.errorMessage,
+  [`datametria-select--${props.size}`]: true
+}))
+
+const isSelected = (value: any) => {
+  if (props.multiple && Array.isArray(props.modelValue)) {
+    return props.modelValue.includes(value)
+  }
+  return props.modelValue === value
+}
+
+const toggleDropdown = () => {
+  if (!props.disabled) {
+    isOpen.value = !isOpen.value
+    if (isOpen.value) {
+      trackEvent('select_open', {
+        component: 'DatametriaSelect',
+        multiple: props.multiple,
+        size: props.size
+      })
+      if (triggerRef.value) {
+        updateDropdownPosition()
+      }
+    }
+  }
+}
+
+const updateDropdownPosition = () => {
+  if (!triggerRef.value) return
+  const rect = triggerRef.value.getBoundingClientRect()
+  dropdownStyle.value = {
+    top: `${rect.bottom + window.scrollY + 4}px`,
+    left: `${rect.left + window.scrollX}px`,
+    width: `${rect.width}px`
+  }
+}
+
+const handleSelect = (option: SelectOption) => {
+  if (props.multiple) {
+    const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
+    const index = current.indexOf(option.value)
+    if (index > -1) {
+      current.splice(index, 1)
+    } else {
+      current.push(option.value)
+    }
+    emit('update:modelValue', current)
+    emit('change', current)
+  } else {
+    emit('update:modelValue', option.value)
+    emit('change', option.value)
+    isOpen.value = false
   }
+  
+  trackEvent('select_change', {
+    component: 'DatametriaSelect',
+    multiple: props.multiple,
+    optionCount: props.multiple ? (Array.isArray(props.modelValue) ? props.modelValue.length : 0) : 1
+  })
+}
+
+const handleNativeChange = (event: Event) => {
+  const target = event.target as HTMLSelectElement
+  emit('update:modelValue', target.value)
+  emit('change', target.value)
+}
+
+const handleClickOutside = (e: MouseEvent) => {
+  const target = e.target as HTMLElement
+  if (!target.closest('.datametria-select')) {
+    isOpen.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+</script>
+
+<style scoped>
+.datametria-select {
+  position: relative;
+  width: 100%;
+}
+
+.datametria-select__label {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-primary, #1f2937);
+}
+
+.datametria-select__required {
+  color: var(--color-error, #ef4444);
+  margin-left: 2px;
+}
+
+.datametria-select__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: 1px solid var(--color-border, #d1d5db);
+  border-radius: 6px;
+  background: var(--color-background, #fff);
+  cursor: pointer;
+  transition: all 0.2s;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.datametria-select__trigger:hover:not([aria-disabled="true"]) {
+  border-color: var(--color-primary, #3b82f6);
+}
+
+.datametria-select__trigger:focus-visible {
+  outline: none;
+  border-color: var(--color-primary, #3b82f6);
+  box-shadow: 0 0 0 3px var(--color-primary-alpha, rgba(59, 130, 246, 0.1));
+}
+
+.is-disabled .datametria-select__trigger {
+  background: var(--color-background-muted, #f3f4f6);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.is-error .datametria-select__trigger {
+  border-color: var(--color-error, #ef4444);
+}
+
+.datametria-select__value {
+  color: var(--color-text-primary, #1f2937);
+}
+
+.datametria-select__placeholder {
+  color: var(--color-text-secondary, #6b7280);
+}
+
+.datametria-select__arrow {
+  font-size: 12px;
+  transition: transform 0.2s;
+}
+
+.datametria-select__arrow.is-open {
+  transform: rotate(180deg);
+}
+
+.datametria-select__dropdown {
+  position: fixed;
+  z-index: 2000;
+  background: var(--color-background, #fff);
+  border: 1px solid var(--color-border, #d1d5db);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  max-height: 300px;
+  overflow: hidden;
+}
+
+.datametria-select__filter {
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  border-bottom: 1px solid var(--color-border, #d1d5db);
+  outline: none;
+  background: var(--color-background, #fff);
+  color: var(--color-text-primary, #1f2937);
+}
+
+.datametria-select__options {
+  max-height: 250px;
+  overflow-y: auto;
+}
+
+.datametria-select__option {
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: background 0.2s;
+  color: var(--color-text-primary, #1f2937);
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+}
+
+.datametria-select__option:hover {
+  background: var(--color-background-muted, #f3f4f6);
+}
+
+.datametria-select__option.is-selected {
+  background: var(--color-primary-alpha, rgba(59, 130, 246, 0.1));
+  color: var(--color-primary, #3b82f6);
+}
+
+.datametria-select__empty {
+  padding: 16px;
+  text-align: center;
+  color: var(--color-text-secondary, #6b7280);
+}
+
+.datametria-select__error {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--color-error, #ef4444);
+}
+
+/* Tamanhos */
+.datametria-select--xs .datametria-select__trigger {
+  padding: 2px 6px;
+  font-size: 11px;
+  min-height: 1.75rem;
+}
+
+.datametria-select--sm .datametria-select__trigger {
+  padding: 4px 8px;
+  font-size: 12px;
+  min-height: 2rem;
+}
+
+.datametria-select--md .datametria-select__trigger {
+  padding: 8px 12px;
+  font-size: 14px;
+  min-height: 2.5rem;
+}
+
+.datametria-select--lg .datametria-select__trigger {
+  padding: 12px 16px;
+  font-size: 16px;
+  min-height: 3rem;
+}
+
+.datametria-select--xl .datametria-select__trigger {
+  padding: 16px 20px;
+  font-size: 18px;
+  min-height: 3.5rem;
 }
 
-/* Controle manual via useTheme() */
-[data-theme="dark"] .datametria-select {
-  background: var(--dm-bg-color-dark, #1e1e1e);
-  color: var(--dm-text-primary-dark, #e0e0e0);
-  border-color: var(--dm-border-color-dark, #404040);
+/* Responsividade mobile */
+@media (max-width: 640px) {
+  .datametria-select--xs .datametria-select__trigger { min-height: 2rem; }
+  .datametria-select--sm .datametria-select__trigger { min-height: 2.25rem; }
+  .datametria-select--md .datametria-select__trigger { min-height: 2.75rem; }
+  .datametria-select--lg .datametria-select__trigger { min-height: 3.25rem; }
+  .datametria-select--xl .datametria-select__trigger { min-height: 3.75rem; }
 }
-</style>
+</style>