feat: Add new ComboBox component (#10267)

app/javascript/dashboard/components-next/combobox/ComboBox.story.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { ref } from 'vue';
+import ComboBox from './ComboBox.vue';
+
+const options = [
+  { value: 1, label: 'Option 1' },
+  { value: 2, label: 'Option 2' },
+  { value: 3, label: 'Option 3' },
+  { value: 4, label: 'Option 4' },
+  { value: 5, label: 'Option 5' },
+];
+const selectedValue = ref('');
+</script>
+
+<template>
+  <Story title="Components/ComboBox" :layout="{ type: 'grid', width: '300px' }">
+    <Variant title="Default">
+      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
+        <ComboBox v-model="selectedValue" :options="options" />
+        <p class="mt-2">Selected value: {{ selectedValue }}</p>
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
+        <ComboBox :options="options" disabled />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/combobox/ComboBox.vue

@@ -0,0 +1,163 @@
+<script setup>
+import { nextTick, ref, computed, watch } from 'vue';
+import { onClickOutside } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true,
+    validator: value =>
+      value.every(option => 'value' in option && 'label' in option),
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  searchPlaceholder: {
+    type: String,
+    default: '',
+  },
+  emptyState: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const { t } = useI18n();
+
+const selectedValue = ref(props.modelValue);
+const open = ref(false);
+const search = ref('');
+const searchInput = ref(null);
+const comboboxRef = ref(null);
+
+const filteredOptions = computed(() => {
+  const searchTerm = search.value.toLowerCase();
+  return props.options.filter(option =>
+    option.label.toLowerCase().includes(searchTerm)
+  );
+});
+const selectPlaceholder = computed(() => {
+  return props.placeholder || t('COMBOBOX.PLACEHOLDER');
+});
+const selectedLabel = computed(() => {
+  const selected = props.options.find(
+    option => option.value === selectedValue.value
+  );
+  return selected?.label ?? selectPlaceholder.value;
+});
+
+const selectOption = option => {
+  selectedValue.value = option.value;
+  emit('update:modelValue', option.value);
+  open.value = false;
+  search.value = '';
+};
+const toggleDropdown = () => {
+  open.value = !open.value;
+  if (open.value) {
+    search.value = '';
+    nextTick(() => searchInput.value.focus());
+  }
+};
+
+watch(
+  () => props.modelValue,
+  newValue => {
+    selectedValue.value = newValue;
+  }
+);
+
+onClickOutside(comboboxRef, () => {
+  open.value = false;
+});
+</script>
+
+<template>
+  <div
+    ref="comboboxRef"
+    class="relative w-full"
+    :class="{
+      'cursor-not-allowed': disabled,
+      'group/combobox': !disabled,
+    }"
+  >
+    <Button
+      variant="outline"
+      :label="selectedLabel"
+      icon-position="right"
+      size="sm"
+      :disabled="disabled"
+      class="justify-between w-full text-slate-900 dark:text-slate-100 group-hover/combobox:border-slate-300 dark:group-hover/combobox:border-slate-600"
+      :icon="open ? 'chevron-up' : 'chevron-down'"
+      @click="toggleDropdown"
+    />
+    <div
+      v-show="open"
+      class="absolute z-50 w-full mt-1 transition-opacity duration-200 bg-white border rounded-md shadow-lg border-slate-200 dark:bg-slate-900 dark:border-slate-700/50"
+    >
+      <div class="relative border-b border-slate-100 dark:border-slate-700/50">
+        <FluentIcon
+          icon="search"
+          :size="14"
+          class="absolute text-gray-400 dark:text-slate-500 top-3 left-3"
+          aria-hidden="true"
+        />
+        <input
+          ref="searchInput"
+          v-model="search"
+          type="search"
+          :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
+          class="w-full py-2 pl-10 pr-2 text-sm bg-white border-none rounded-t-md dark:bg-slate-900 text-slate-900 dark:text-slate-50"
+        />
+      </div>
+      <ul
+        class="py-1 overflow-auto max-h-60"
+        role="listbox"
+        :aria-activedescendant="selectedValue"
+      >
+        <li
+          v-for="option in filteredOptions"
+          :key="option.value"
+          class="flex items-center justify-between w-full gap-2 px-3 py-2 text-sm transition-colors duration-150 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800/50"
+          :class="{
+            'bg-slate-50 dark:bg-slate-800/50': option.value === selectedValue,
+          }"
+          role="option"
+          :aria-selected="option.value === selectedValue"
+          @click="selectOption(option)"
+        >
+          <span :class="{ 'font-medium': option.value === selectedValue }">
+            {{ option.label }}
+          </span>
+          <FluentIcon
+            v-if="option.value === selectedValue"
+            icon="checkmark"
+            :size="16"
+            class="flex-shrink-0"
+            aria-hidden="true"
+          />
+        </li>
+        <li
+          v-if="filteredOptions.length === 0"
+          class="px-3 py-2 text-sm text-slate-600 dark:text-slate-300"
+        >
+          {{ emptyState || t('COMBOBOX.EMPTY_STATE') }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/i18n/locale/en/components.json

@@ -3,6 +3,11 @@
     "SHOWING": "Showing {startItem} - {endItem} of {totalItems} items",
     "CURRENT_PAGE_INFO": "{currentPage} of {totalPages} pages"
   },
+  "COMBOBOX": {
+    "PLACEHOLDER": "Select an option...",
+    "EMPTY_STATE": "No results found.",
+    "SEARCH_PLACEHOLDER": "Search..."
+  },
   "DIALOG": {
     "BUTTONS": {
       "CANCEL": "Cancel",