@datametria/vue-components 2.2.0 → 2.3.0

package/src/components/DatametriaAutocomplete.vue

@@ -1,141 +1,103 @@
 <template>
-  <div class="dm-autocomplete" ref="autocompleteRef">
-    <label v-if="label" :for="inputId" class="dm-autocomplete__label">
-      {{ label }}
-      <span v-if="required" class="dm-autocomplete__required">*</span>
-    </label>
-    <div class="dm-autocomplete__wrapper">
-      <input
-        :id="inputId"
-        v-model="searchQuery"
-        type="text"
-        role="combobox"
-        class="dm-autocomplete__input"
-        :class="{ 'dm-autocomplete__input--error': error }"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :required="required"
-        :aria-label="ariaLabel"
-        :aria-expanded="isOpen"
-        :aria-controls="`${inputId}-listbox`"
-        :aria-activedescendant="activeOptionId"
-        @focus="handleFocus"
-        @blur="handleBlur"
-        @keydown="handleKeydown"
-        @input="handleInput"
-      />
-      <div v-if="loading" class="dm-autocomplete__loading">
-        <span class="dm-autocomplete__spinner"></span>
-      </div>
-    </div>
-    
-    <div
-      v-if="isOpen"
-      :id="`${inputId}-listbox`"
-      class="dm-autocomplete__dropdown"
-      role="listbox"
-    >
-      <div
-        v-if="filteredOptions.length === 0"
-        class="dm-autocomplete__no-results"
-      >
-        No results found
-      </div>
+  <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-for="(option, index) in filteredOptions"
-        :key="option.value"
-        :id="`${inputId}-option-${index}`"
-        class="dm-autocomplete__option"
-        :class="{ 'dm-autocomplete__option--active': index === activeIndex }"
-        role="option"
-        :aria-selected="index === activeIndex"
-        @click="selectOption(option)"
-        @mouseenter="activeIndex = index"
+        v-if="isOpen && suggestions.length"
+        ref="dropdownRef"
+        class="datametria-autocomplete__dropdown"
+        :style="dropdownStyle"
       >
-        {{ option.label }}
-      </div>
-    </div>
-
-    <div v-if="multiple && selectedOptions.length > 0" class="dm-autocomplete__tags">
-      <span
-        v-for="option in selectedOptions"
-        :key="option.value"
-        class="dm-autocomplete__tag"
-      >
-        {{ option.label }}
-        <button
-          type="button"
-          class="dm-autocomplete__tag-remove"
-          @click="removeOption(option)"
+        <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"
         >
-          ×
-        </button>
-      </span>
-    </div>
-
-    <div v-if="error" class="dm-autocomplete__error">
-      {{ error }}
-    </div>
+          <span v-html="highlightMatch(item)"></span>
+        </div>
+      </div>
+    </Teleport>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue'
-
-interface Option {
-  value: string | number
-  label: string
-  [key: string]: any
-}
+import { ref, computed, watch } from 'vue'
 
 interface Props {
-  modelValue?: string | number | Option | Option[]
-  options: (Option | string)[]
+  modelValue?: string
+  fetchSuggestions: (query: string) => Promise<string[]> | string[]
+  debounce?: number
+  triggerOnFocus?: boolean
   placeholder?: string
-  label?: string
-  error?: string
   disabled?: boolean
-  required?: boolean
-  loading?: boolean
-  multiple?: boolean
-  ariaLabel?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  placeholder: 'Search...',
-  multiple: false
+  modelValue: '',
+  debounce: 300,
+  triggerOnFocus: false,
+  placeholder: '',
+  disabled: false
 })
 
 const emit = defineEmits<{
-  'update:modelValue': [value: string | number | Option | Option[]]
+  'update:modelValue': [value: string]
+  select: [value: string]
 }>()
 
-const autocompleteRef = ref<HTMLElement>()
-const searchQuery = ref('')
+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 selectedOptions = ref<Option[]>([])
-
-const inputId = computed(() => `autocomplete-${Math.random().toString(36).substr(2, 9)}`)
-const activeOptionId = computed(() => 
-  activeIndex.value >= 0 ? `${inputId.value}-option-${activeIndex.value}` : undefined
-)
+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 filteredOptions = computed(() => {
-  const normalizedOptions = props.options.map(option => 
-    typeof option === 'string' 
-      ? { value: option, label: option }
-      : option
-  )
+const handleInput = () => {
+  emit('update:modelValue', inputValue.value)
   
-  if (!searchQuery.value) return normalizedOptions
-  return normalizedOptions.filter(option =>
-    option.label.toLowerCase().includes(searchQuery.value.toLowerCase())
-  )
-})
+  if (debounceTimer) {
+    clearTimeout(debounceTimer)
+  }
+  
+  debounceTimer = setTimeout(() => {
+    fetchSuggestionsData()
+  }, props.debounce)
+}
 
 const handleFocus = () => {
-  isOpen.value = true
+  if (props.triggerOnFocus && inputValue.value) {
+    fetchSuggestionsData()
+  }
 }
 
 const handleBlur = () => {
@@ -145,194 +107,127 @@ const handleBlur = () => {
   }, 200)
 }
 
-const handleInput = () => {
-  isOpen.value = true
+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 handleKeydown = (event: KeyboardEvent) => {
-  switch (event.key) {
-    case 'ArrowDown':
-      event.preventDefault()
-      if (activeIndex.value < filteredOptions.value.length - 1) {
-        activeIndex.value++
-      }
-      break
-    case 'ArrowUp':
-      event.preventDefault()
-      if (activeIndex.value > 0) {
-        activeIndex.value--
-      }
-      break
-    case 'Enter':
-      event.preventDefault()
-      if (activeIndex.value >= 0) {
-        selectOption(filteredOptions.value[activeIndex.value])
-      }
-      break
-    case 'Escape':
-      isOpen.value = false
-      activeIndex.value = -1
-      break
+const selectNext = () => {
+  if (activeIndex.value < suggestions.value.length - 1) {
+    activeIndex.value++
   }
 }
 
-const selectOption = (option: Option) => {
-  if (props.multiple) {
-    if (!selectedOptions.value.find(o => o.value === option.value)) {
-      selectedOptions.value.push(option)
-      emit('update:modelValue', selectedOptions.value)
-    }
-  } else {
-    searchQuery.value = option.label
-    emit('update:modelValue', option)
-    isOpen.value = false
+const selectPrev = () => {
+  if (activeIndex.value > 0) {
+    activeIndex.value--
   }
 }
 
-const removeOption = (option: Option) => {
-  selectedOptions.value = selectedOptions.value.filter(o => o.value !== option.value)
-  emit('update:modelValue', selectedOptions.value)
+const selectCurrent = () => {
+  if (activeIndex.value >= 0 && activeIndex.value < suggestions.value.length) {
+    selectItem(suggestions.value[activeIndex.value])
+  }
 }
 
-const handleClickOutside = (event: Event) => {
-  if (autocompleteRef.value && !autocompleteRef.value.contains(event.target as Node)) {
-    isOpen.value = false
-  }
+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>')
 }
 
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-})
+const escapeRegex = (str: string): string => {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
 
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
+watch(() => props.modelValue, (newValue) => {
+  if (newValue !== inputValue.value) {
+    inputValue.value = newValue
+  }
 })
 </script>
 
 <style scoped>
-.dm-autocomplete {
+.datametria-autocomplete {
   position: relative;
+  display: inline-block;
   width: 100%;
 }
 
-.dm-autocomplete__label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-  color: var(--dm-neutral-700, #374151);
-}
-
-.dm-autocomplete__required {
-  color: var(--dm-error, #ef4444);
-}
-
-.dm-autocomplete__wrapper {
-  position: relative;
-}
-
-.dm-autocomplete__input {
+.datametria-autocomplete__input {
   width: 100%;
-  padding: 0.75rem;
-  border: 1px solid var(--dm-neutral-300, #d1d5db);
-  border-radius: var(--dm-radius-md, 0.375rem);
-  font-size: 1rem;
+  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;
 }
 
-.dm-autocomplete__input:focus {
-  outline: none;
-  border-color: var(--dm-primary, #0072ce);
-  box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.1);
-}
-
-.dm-autocomplete__input--error {
-  border-color: var(--dm-error, #ef4444);
-}
-
-.dm-autocomplete__loading {
-  position: absolute;
-  right: 0.75rem;
-  top: 50%;
-  transform: translateY(-50%);
+.datametria-autocomplete__input:hover {
+  border-color: var(--datametria-border-color-hover, #c0c4cc);
 }
 
-.dm-autocomplete__spinner {
-  display: inline-block;
-  width: 1rem;
-  height: 1rem;
-  border: 2px solid var(--dm-neutral-300, #d1d5db);
-  border-top: 2px solid var(--dm-primary, #0072ce);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
+.datametria-autocomplete__input:focus {
+  outline: none;
+  border-color: var(--datametria-primary-color, #0072ce);
 }
 
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+.datametria-autocomplete--disabled .datametria-autocomplete__input {
+  background-color: var(--datametria-disabled-bg-color, #f5f7fa);
+  cursor: not-allowed;
 }
 
-.dm-autocomplete__dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  z-index: 1000;
-  background: white;
-  border: 1px solid var(--dm-neutral-300, #d1d5db);
-  border-radius: var(--dm-radius-md, 0.375rem);
-  box-shadow: var(--dm-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
+.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;
 }
 
-.dm-autocomplete__option {
-  padding: 0.75rem;
+.datametria-autocomplete__item {
+  padding: 8px 12px;
   cursor: pointer;
+  font-size: 14px;
+  color: var(--datametria-text-color, #303133);
   transition: background-color 0.2s;
 }
 
-.dm-autocomplete__option:hover,
-.dm-autocomplete__option--active {
-  background-color: var(--dm-neutral-100, #f3f4f6);
-}
-
-.dm-autocomplete__no-results {
-  padding: 0.75rem;
-  color: var(--dm-neutral-500, #6b7280);
-  text-align: center;
-}
-
-.dm-autocomplete__tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  margin-top: 0.5rem;
-}
-
-.dm-autocomplete__tag {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  background-color: var(--dm-primary, #0072ce);
-  color: white;
-  border-radius: var(--dm-radius-sm, 0.25rem);
-  font-size: 0.875rem;
-}
-
-.dm-autocomplete__tag-remove {
-  background: none;
-  border: none;
-  color: white;
-  cursor: pointer;
-  font-size: 1.25rem;
-  line-height: 1;
+.datametria-autocomplete__item:hover,
+.datametria-autocomplete__item--active {
+  background-color: var(--datametria-hover-bg-color, #f5f7fa);
 }
 
-.dm-autocomplete__error {
-  margin-top: 0.25rem;
-  color: var(--dm-error, #ef4444);
-  font-size: 0.875rem;
+.datametria-autocomplete__item :deep(strong) {
+  color: var(--datametria-primary-color, #0072ce);
+  font-weight: 600;
 }
-</style>
+</style>