@datametria/vue-components 2.3.1 → 2.4.0

package/src/components/DatametriaAutocomplete.vue

@@ -1,233 +1,254 @@
-<template>
-  <div class="datametria-autocomplete" :class="{ 'datametria-autocomplete--disabled': disabled }">
-    <input
-      ref="inputRef"
-      v-model="inputValue"
-      type="text"
-      class="datametria-autocomplete__input"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      @input="handleInput"
-      @focus="handleFocus"
-      @blur="handleBlur"
-      @keydown.down.prevent="selectNext"
-      @keydown.up.prevent="selectPrev"
-      @keydown.enter.prevent="selectCurrent"
-    />
-    <Teleport to="body">
-      <div
-        v-if="isOpen && suggestions.length"
-        ref="dropdownRef"
-        class="datametria-autocomplete__dropdown"
-        :style="dropdownStyle"
-      >
-        <div
-          v-for="(item, index) in suggestions"
-          :key="index"
-          class="datametria-autocomplete__item"
-          :class="{ 'datametria-autocomplete__item--active': index === activeIndex }"
-          @mousedown.prevent="selectItem(item)"
-          @mouseenter="activeIndex = index"
-        >
-          <span v-html="highlightMatch(item)"></span>
-        </div>
-      </div>
-    </Teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-
-interface Props {
-  modelValue?: string
-  fetchSuggestions: (query: string) => Promise<string[]> | string[]
-  debounce?: number
-  triggerOnFocus?: boolean
-  placeholder?: string
-  disabled?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: '',
-  debounce: 300,
-  triggerOnFocus: false,
-  placeholder: '',
-  disabled: false
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
-  select: [value: string]
-}>()
-
-const inputRef = ref<HTMLInputElement>()
-const dropdownRef = ref<HTMLDivElement>()
-const inputValue = ref(props.modelValue)
-const suggestions = ref<string[]>([])
-const isOpen = ref(false)
-const activeIndex = ref(-1)
-const loading = ref(false)
-let debounceTimer: ReturnType<typeof setTimeout> | null = null
-
-const dropdownStyle = computed(() => {
-  if (!inputRef.value) return {}
-  const rect = inputRef.value.getBoundingClientRect()
-  return {
-    position: 'fixed' as const,
-    top: `${rect.bottom + 4}px`,
-    left: `${rect.left}px`,
-    width: `${rect.width}px`,
-    zIndex: 9999
-  }
-})
-
-const handleInput = () => {
-  emit('update:modelValue', inputValue.value)
-  
-  if (debounceTimer) {
-    clearTimeout(debounceTimer)
-  }
-  
-  debounceTimer = setTimeout(() => {
-    fetchSuggestionsData()
-  }, props.debounce)
-}
-
-const handleFocus = () => {
-  if (props.triggerOnFocus && inputValue.value) {
-    fetchSuggestionsData()
-  }
-}
-
-const handleBlur = () => {
-  setTimeout(() => {
-    isOpen.value = false
-    activeIndex.value = -1
-  }, 200)
-}
-
-const fetchSuggestionsData = async () => {
-  if (!inputValue.value) {
-    suggestions.value = []
-    isOpen.value = false
-    return
-  }
-  
-  loading.value = true
-  try {
-    const result = await props.fetchSuggestions(inputValue.value)
-    suggestions.value = result
-    isOpen.value = result.length > 0
-    activeIndex.value = -1
-  } catch (error) {
-    suggestions.value = []
-    isOpen.value = false
-  } finally {
-    loading.value = false
-  }
-}
-
-const selectItem = (item: string) => {
-  inputValue.value = item
-  emit('update:modelValue', item)
-  emit('select', item)
-  isOpen.value = false
-  activeIndex.value = -1
-}
-
-const selectNext = () => {
-  if (activeIndex.value < suggestions.value.length - 1) {
-    activeIndex.value++
-  }
-}
-
-const selectPrev = () => {
-  if (activeIndex.value > 0) {
-    activeIndex.value--
+<template>
+  <div class="datametria-autocomplete" :class="{ 'datametria-autocomplete--disabled': disabled }">
+    <input
+      ref="inputRef"
+      v-model="inputValue"
+      type="text"
+      role="combobox"
+      :aria-expanded="isOpen"
+      aria-autocomplete="list"
+      class="datametria-autocomplete__input"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @keydown.down.prevent="selectNext"
+      @keydown.up.prevent="selectPrev"
+      @keydown.enter.prevent="selectCurrent"
+    />
+    <Teleport to="body">
+      <div
+        v-if="isOpen && suggestions.length"
+        ref="dropdownRef"
+        class="datametria-autocomplete__dropdown"
+        :style="dropdownStyle"
+      >
+        <div
+          v-for="(item, index) in suggestions"
+          :key="index"
+          class="datametria-autocomplete__item"
+          :class="{ 'datametria-autocomplete__item--active': index === activeIndex }"
+          @mousedown.prevent="selectItem(item)"
+          @mouseenter="activeIndex = index"
+        >
+          <span v-html="highlightMatch(item)"></span>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+interface Props {
+  modelValue?: string
+  fetchSuggestions: (query: string) => Promise<string[]> | string[]
+  debounce?: number
+  triggerOnFocus?: boolean
+  placeholder?: string
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  debounce: 300,
+  triggerOnFocus: false,
+  placeholder: '',
+  disabled: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  select: [value: string]
+}>()
+
+const inputRef = ref<HTMLInputElement>()
+const dropdownRef = ref<HTMLDivElement>()
+const inputValue = ref(props.modelValue)
+const suggestions = ref<string[]>([])
+const isOpen = ref(false)
+const activeIndex = ref(-1)
+const loading = ref(false)
+let debounceTimer: ReturnType<typeof setTimeout> | null = null
+
+const dropdownStyle = computed(() => {
+  if (!inputRef.value) return {}
+  const rect = inputRef.value.getBoundingClientRect()
+  return {
+    position: 'fixed' as const,
+    top: `${rect.bottom + 4}px`,
+    left: `${rect.left}px`,
+    width: `${rect.width}px`,
+    zIndex: 9999
+  }
+})
+
+const handleInput = () => {
+  emit('update:modelValue', inputValue.value)
+  
+  if (debounceTimer) {
+    clearTimeout(debounceTimer)
+  }
+  
+  debounceTimer = setTimeout(() => {
+    fetchSuggestionsData()
+  }, props.debounce)
+}
+
+const handleFocus = () => {
+  if (props.triggerOnFocus && inputValue.value) {
+    fetchSuggestionsData()
+  }
+}
+
+const handleBlur = () => {
+  setTimeout(() => {
+    isOpen.value = false
+    activeIndex.value = -1
+  }, 200)
+}
+
+const fetchSuggestionsData = async () => {
+  if (!inputValue.value) {
+    suggestions.value = []
+    isOpen.value = false
+    return
+  }
+  
+  loading.value = true
+  try {
+    const result = await props.fetchSuggestions(inputValue.value)
+    suggestions.value = result
+    isOpen.value = result.length > 0
+    activeIndex.value = -1
+  } catch (error) {
+    suggestions.value = []
+    isOpen.value = false
+  } finally {
+    loading.value = false
+  }
+}
+
+const selectItem = (item: string) => {
+  inputValue.value = item
+  emit('update:modelValue', item)
+  emit('select', item)
+  isOpen.value = false
+  activeIndex.value = -1
+}
+
+const selectNext = () => {
+  if (activeIndex.value < suggestions.value.length - 1) {
+    activeIndex.value++
+  }
+}
+
+const selectPrev = () => {
+  if (activeIndex.value > 0) {
+    activeIndex.value--
+  }
+}
+
+const selectCurrent = () => {
+  if (activeIndex.value >= 0 && activeIndex.value < suggestions.value.length) {
+    selectItem(suggestions.value[activeIndex.value])
+  }
+}
+
+const highlightMatch = (text: string): string => {
+  if (!inputValue.value) return text
+  
+  const regex = new RegExp(`(${escapeRegex(inputValue.value)})`, 'gi')
+  return text.replace(regex, '<strong>$1</strong>')
+}
+
+const escapeRegex = (str: string): string => {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+watch(() => props.modelValue, (newValue) => {
+  if (newValue !== inputValue.value) {
+    inputValue.value = newValue
+  }
+})
+</script>
+
+<style scoped>
+.datametria-autocomplete {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.datametria-autocomplete__input {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid var(--datametria-border-color, #dcdfe6);
+  border-radius: 4px;
+  font-size: 14px;
+  color: var(--datametria-text-color, #303133);
+  background-color: var(--datametria-bg-color, #ffffff);
+  transition: border-color 0.2s;
+}
+
+.datametria-autocomplete__input:hover {
+  border-color: var(--datametria-border-color-hover, #c0c4cc);
+}
+
+.datametria-autocomplete__input:focus {
+  outline: none;
+  border-color: var(--datametria-primary-color, #0072ce);
+}
+
+.datametria-autocomplete--disabled .datametria-autocomplete__input {
+  background-color: var(--datametria-disabled-bg-color, #f5f7fa);
+  cursor: not-allowed;
+}
+
+.datametria-autocomplete__dropdown {
+  background: var(--datametria-bg-color, #ffffff);
+  border: 1px solid var(--datametria-border-color, #dcdfe6);
+  border-radius: 4px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.datametria-autocomplete__item {
+  padding: 8px 12px;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--datametria-text-color, #303133);
+  transition: background-color 0.2s;
+}
+
+.datametria-autocomplete__item:hover,
+.datametria-autocomplete__item--active {
+  background-color: var(--datametria-hover-bg-color, #f5f7fa);
+}
+
+.datametria-autocomplete__item :deep(strong) {
+  color: var(--datametria-primary-color, #0072ce);
+  font-weight: 600;
+}
+
+/* Dark Mode Support - Hybrid Approach */
+
+/* Fallback automático (sem JS) */
+@media (prefers-color-scheme: dark) {
+  .datametria-autocomplete {
+    background: var(--dm-bg-color-dark, #1e1e1e);
+    color: var(--dm-text-primary-dark, #e0e0e0);
+    border-color: var(--dm-border-color-dark, #404040);
   }
 }
 
-const selectCurrent = () => {
-  if (activeIndex.value >= 0 && activeIndex.value < suggestions.value.length) {
-    selectItem(suggestions.value[activeIndex.value])
-  }
-}
-
-const highlightMatch = (text: string): string => {
-  if (!inputValue.value) return text
-  
-  const regex = new RegExp(`(${escapeRegex(inputValue.value)})`, 'gi')
-  return text.replace(regex, '<strong>$1</strong>')
-}
-
-const escapeRegex = (str: string): string => {
-  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-}
-
-watch(() => props.modelValue, (newValue) => {
-  if (newValue !== inputValue.value) {
-    inputValue.value = newValue
-  }
-})
-</script>
-
-<style scoped>
-.datametria-autocomplete {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-}
-
-.datametria-autocomplete__input {
-  width: 100%;
-  padding: 8px 12px;
-  border: 1px solid var(--datametria-border-color, #dcdfe6);
-  border-radius: 4px;
-  font-size: 14px;
-  color: var(--datametria-text-color, #303133);
-  background-color: var(--datametria-bg-color, #ffffff);
-  transition: border-color 0.2s;
-}
-
-.datametria-autocomplete__input:hover {
-  border-color: var(--datametria-border-color-hover, #c0c4cc);
-}
-
-.datametria-autocomplete__input:focus {
-  outline: none;
-  border-color: var(--datametria-primary-color, #0072ce);
-}
-
-.datametria-autocomplete--disabled .datametria-autocomplete__input {
-  background-color: var(--datametria-disabled-bg-color, #f5f7fa);
-  cursor: not-allowed;
-}
-
-.datametria-autocomplete__dropdown {
-  background: var(--datametria-bg-color, #ffffff);
-  border: 1px solid var(--datametria-border-color, #dcdfe6);
-  border-radius: 4px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-.datametria-autocomplete__item {
-  padding: 8px 12px;
-  cursor: pointer;
-  font-size: 14px;
-  color: var(--datametria-text-color, #303133);
-  transition: background-color 0.2s;
-}
-
-.datametria-autocomplete__item:hover,
-.datametria-autocomplete__item--active {
-  background-color: var(--datametria-hover-bg-color, #f5f7fa);
-}
-
-.datametria-autocomplete__item :deep(strong) {
-  color: var(--datametria-primary-color, #0072ce);
-  font-weight: 600;
+/* Controle manual via useTheme() */
+[data-theme="dark"] .datametria-autocomplete {
+  background: var(--dm-bg-color-dark, #1e1e1e);
+  color: var(--dm-text-primary-dark, #e0e0e0);
+  border-color: var(--dm-border-color-dark, #404040);
 }
-</style>
+</style>