@datametria/vue-components 1.1.3 → 2.0.1

package/src/components/DatametriaAutocomplete.vue

@@ -9,6 +9,7 @@
         :id="inputId"
         v-model="searchQuery"
         type="text"
+        role="combobox"
         class="dm-autocomplete__input"
         :class="{ 'dm-autocomplete__input--error': error }"
         :placeholder="placeholder"
@@ -18,126 +19,150 @@
         :aria-expanded="isOpen"
         :aria-controls="`${inputId}-listbox`"
         :aria-activedescendant="activeOptionId"
-        role="combobox"
-        autocomplete="off"
-        @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"
         @keydown="handleKeydown"
+        @input="handleInput"
       />
-      <ul
-        v-if="isOpen && filteredOptions.length"
-        :id="`${inputId}-listbox`"
-        class="dm-autocomplete__dropdown"
-        role="listbox"
+      <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"
       >
-        <li
-          v-for="(option, index) in filteredOptions"
-          :key="index"
-          :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"
-        >
-          {{ option }}
-        </li>
-      </ul>
-      <div v-else-if="isOpen && !filteredOptions.length" class="dm-autocomplete__no-results">
-        No results
+        No results found
+      </div>
+      <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"
+      >
+        {{ option.label }}
       </div>
     </div>
-    <p v-if="error" class="dm-autocomplete__error">{{ error }}</p>
+
+    <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)"
+        >
+          ×
+        </button>
+      </span>
+    </div>
+
+    <div v-if="error" class="dm-autocomplete__error">
+      {{ error }}
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+interface Option {
+  value: string | number
+  label: string
+  [key: string]: any
+}
 
 interface Props {
-  modelValue?: string
-  options: string[]
-  label?: string
+  modelValue?: string | number | Option | Option[]
+  options: (Option | string)[]
   placeholder?: string
+  label?: string
+  error?: string
   disabled?: boolean
   required?: boolean
-  error?: string
+  loading?: boolean
+  multiple?: boolean
   ariaLabel?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  modelValue: '',
-  options: () => [],
-  disabled: false,
-  required: false
+  placeholder: 'Search...',
+  multiple: false
 })
 
 const emit = defineEmits<{
-  'update:modelValue': [value: string]
+  'update:modelValue': [value: string | number | Option | Option[]]
 }>()
 
-const inputId = `dm-autocomplete-${Math.random().toString(36).substr(2, 9)}`
 const autocompleteRef = ref<HTMLElement>()
-const searchQuery = ref(props.modelValue)
+const searchQuery = ref('')
 const isOpen = ref(false)
 const activeIndex = ref(-1)
+const selectedOptions = ref<Option[]>([])
 
-const filteredOptions = computed(() => {
-  if (!searchQuery.value) return props.options
-  return props.options.filter(option =>
-    option.toLowerCase().includes(searchQuery.value.toLowerCase())
-  )
-})
-
-const activeOptionId = computed(() =>
-  activeIndex.value >= 0 ? `${inputId}-option-${activeIndex.value}` : undefined
+const inputId = computed(() => `autocomplete-${Math.random().toString(36).substr(2, 9)}`)
+const activeOptionId = computed(() => 
+  activeIndex.value >= 0 ? `${inputId.value}-option-${activeIndex.value}` : undefined
 )
 
-watch(() => props.modelValue, (newValue) => {
-  searchQuery.value = newValue
+const filteredOptions = computed(() => {
+  const normalizedOptions = props.options.map(option => 
+    typeof option === 'string' 
+      ? { value: option, label: option }
+      : option
+  )
+  
+  if (!searchQuery.value) return normalizedOptions
+  return normalizedOptions.filter(option =>
+    option.label.toLowerCase().includes(searchQuery.value.toLowerCase())
+  )
 })
 
-const handleInput = () => {
-  isOpen.value = true
-  activeIndex.value = -1
-  emit('update:modelValue', searchQuery.value)
-}
-
 const handleFocus = () => {
-  if (!props.disabled) {
-    isOpen.value = true
-  }
+  isOpen.value = true
 }
 
 const handleBlur = () => {
   setTimeout(() => {
     isOpen.value = false
+    activeIndex.value = -1
   }, 200)
 }
 
-const selectOption = (option: string) => {
-  searchQuery.value = option
-  emit('update:modelValue', option)
-  isOpen.value = false
+const handleInput = () => {
+  isOpen.value = true
   activeIndex.value = -1
 }
 
 const handleKeydown = (event: KeyboardEvent) => {
-  if (!isOpen.value && event.key !== 'Escape') {
-    isOpen.value = true
-    return
-  }
-
   switch (event.key) {
     case 'ArrowDown':
       event.preventDefault()
-      activeIndex.value = Math.min(activeIndex.value + 1, filteredOptions.value.length - 1)
+      if (activeIndex.value < filteredOptions.value.length - 1) {
+        activeIndex.value++
+      }
       break
     case 'ArrowUp':
       event.preventDefault()
-      activeIndex.value = Math.max(activeIndex.value - 1, 0)
+      if (activeIndex.value > 0) {
+        activeIndex.value--
+      }
       break
     case 'Enter':
       event.preventDefault()
@@ -152,7 +177,25 @@ const handleKeydown = (event: KeyboardEvent) => {
   }
 }
 
-const handleClickOutside = (event: MouseEvent) => {
+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 removeOption = (option: Option) => {
+  selectedOptions.value = selectedOptions.value.filter(o => o.value !== option.value)
+  emit('update:modelValue', selectedOptions.value)
+}
+
+const handleClickOutside = (event: Event) => {
   if (autocompleteRef.value && !autocompleteRef.value.contains(event.target as Node)) {
     isOpen.value = false
   }
@@ -169,20 +212,19 @@ onUnmounted(() => {
 
 <style scoped>
 .dm-autocomplete {
-  display: flex;
-  flex-direction: column;
-  gap: var(--dm-space-2);
   position: relative;
+  width: 100%;
 }
 
 .dm-autocomplete__label {
-  color: var(--dm-text-primary);
-  font-size: var(--dm-text-sm);
+  display: block;
+  margin-bottom: 0.5rem;
   font-weight: 500;
+  color: var(--dm-neutral-700, #374151);
 }
 
 .dm-autocomplete__required {
-  color: var(--dm-error);
+  color: var(--dm-error, #ef4444);
 }
 
 .dm-autocomplete__wrapper {
@@ -191,102 +233,106 @@ onUnmounted(() => {
 
 .dm-autocomplete__input {
   width: 100%;
-  min-height: 44px;
-  padding: var(--dm-space-3);
-  border: 1px solid var(--dm-gray-300);
-  border-radius: var(--dm-radius);
-  font-size: var(--dm-text-base);
-  color: var(--dm-text-primary);
-  background: var(--dm-white);
-  transition: var(--dm-transition);
+  padding: 0.75rem;
+  border: 1px solid var(--dm-neutral-300, #d1d5db);
+  border-radius: var(--dm-radius-md, 0.375rem);
+  font-size: 1rem;
+  transition: border-color 0.2s;
 }
 
-.dm-autocomplete__input::placeholder {
-  color: var(--dm-gray-400);
+.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:hover:not(:disabled) {
-  border-color: var(--dm-gray-400);
+.dm-autocomplete__input--error {
+  border-color: var(--dm-error, #ef4444);
 }
 
-.dm-autocomplete__input:focus {
-  outline: var(--dm-focus-ring);
-  outline-offset: 0;
-  border-color: var(--dm-primary);
+.dm-autocomplete__loading {
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
 }
 
-.dm-autocomplete__input:disabled {
-  background: var(--dm-gray-100);
-  cursor: not-allowed;
-  opacity: 0.6;
+.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;
 }
 
-.dm-autocomplete__input--error {
-  border-color: var(--dm-error);
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 }
 
 .dm-autocomplete__dropdown {
   position: absolute;
-  top: calc(100% + 4px);
+  top: 100%;
   left: 0;
   right: 0;
-  max-height: 240px;
-  overflow-y: auto;
-  background: var(--dm-white);
-  border: 1px solid var(--dm-gray-300);
-  border-radius: var(--dm-radius);
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  list-style: none;
-  margin: 0;
-  padding: var(--dm-space-1);
   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));
+  max-height: 200px;
+  overflow-y: auto;
 }
 
 .dm-autocomplete__option {
-  padding: var(--dm-space-2) var(--dm-space-3);
+  padding: 0.75rem;
   cursor: pointer;
-  border-radius: var(--dm-radius);
-  transition: var(--dm-transition);
-  color: var(--dm-text-primary);
+  transition: background-color 0.2s;
 }
 
 .dm-autocomplete__option:hover,
 .dm-autocomplete__option--active {
-  background: var(--dm-gray-100);
+  background-color: var(--dm-neutral-100, #f3f4f6);
 }
 
 .dm-autocomplete__no-results {
-  padding: var(--dm-space-3);
+  padding: 0.75rem;
+  color: var(--dm-neutral-500, #6b7280);
   text-align: center;
-  color: var(--dm-gray-500);
-  font-size: var(--dm-text-sm);
 }
 
-.dm-autocomplete__error {
-  color: var(--dm-error);
-  font-size: var(--dm-text-sm);
-  margin: 0;
+.dm-autocomplete__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
 }
 
-@media (prefers-color-scheme: dark) {
-  .dm-autocomplete__input {
-    background: var(--dm-gray-800);
-    border-color: var(--dm-gray-600);
-    color: var(--dm-white);
-  }
-
-  .dm-autocomplete__input:disabled {
-    background: var(--dm-gray-900);
-  }
+.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__dropdown {
-    background: var(--dm-gray-800);
-    border-color: var(--dm-gray-600);
-  }
+.dm-autocomplete__tag-remove {
+  background: none;
+  border: none;
+  color: white;
+  cursor: pointer;
+  font-size: 1.25rem;
+  line-height: 1;
+}
 
-  .dm-autocomplete__option:hover,
-  .dm-autocomplete__option--active {
-    background: var(--dm-gray-700);
-  }
+.dm-autocomplete__error {
+  margin-top: 0.25rem;
+  color: var(--dm-error, #ef4444);
+  font-size: 0.875rem;
 }
-</style>
+</style>