Merge pull request #60 from nethesis/combo-fix-initial-user-input

NeCombobox improvements
nethesis · Jun 24, 2024 · fef7695 · fef7695
2 parents 752ebce + 61fb8ff
commit fef7695
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 5 deletions.
diff --git a/src/components/NeCombobox.vue b/src/components/NeCombobox.vue
@@ -14,7 +14,10 @@ import {
   ComboboxOptions
 } from '@headlessui/vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faChevronDown as fasChevronDown } from '@fortawesome/free-solid-svg-icons'
+import {
+  faChevronDown as fasChevronDown,
+  type IconDefinition
+} from '@fortawesome/free-solid-svg-icons'
 import { faCheck as fasCheck } from '@fortawesome/free-solid-svg-icons'
 import { faXmark as fasXmark } from '@fortawesome/free-solid-svg-icons'
 import NeBadge from './NeBadge.vue'
@@ -25,6 +28,7 @@ export interface NeComboboxOption {
   id: string
   label: string
   description?: string
+  icon?: IconDefinition
   rawObj?: any
   disabled?: boolean
 }
@@ -251,10 +255,18 @@ function onOptionSelected(selectedOption: NeComboboxOption) {
 }
 
 function selectSingleOptionFromModelValue() {
-  const optionFound = props.options.find((option) => option.id === props.modelValue)
+  const optionFound = allOptions.value.find((option) => option.id === props.modelValue)
 
   if (optionFound) {
     selected.value = optionFound
+  } else if (props.acceptUserInput && props.modelValue) {
+    const userInputOption = {
+      id: props.modelValue as string,
+      label: props.modelValue as string,
+      description: props.userInputLabel
+    }
+    userInputOptions.value.push(userInputOption)
+    selected.value = userInputOption
   }
 }
 
@@ -267,6 +279,9 @@ function selectMultipleOptionsFromModelValue() {
     if (optionFound) {
       selectedList.push(optionFound)
     } else if (props.acceptUserInput) {
+      if (!selectedOption.description) {
+        selectedOption.description = props.userInputLabel
+      }
       userInputOptions.value.push(selectedOption)
       selectedList.push(selectedOption)
     }
@@ -361,10 +376,19 @@ onClickOutside(comboboxRef, () => onClickOutsideCombobox())
                       : 'text-gray-900 dark:text-gray-100'
                 ]"
               >
-                <div class="block truncate">
-                  <span :class="['truncate', optionSelected && 'font-semibold']">
+                <div class="flex items-center truncate">
+                  <!-- option icon -->
+                  <font-awesome-icon
+                    v-if="option.icon"
+                    :icon="option.icon"
+                    class="mr-2.5 h-4 w-4 shrink-0"
+                    aria-hidden="true"
+                  />
+                  <!-- option label -->
+                  <span :class="['shrink-0 truncate', optionSelected && 'font-semibold']">
                     {{ option.label }}
                   </span>
+                  <!-- option description -->
                   <span
                     v-if="option.description && showOptionsType"
                     :class="['ml-2.5 truncate text-gray-500 dark:text-gray-400']"

diff --git a/src/main.ts b/src/main.ts
@@ -44,7 +44,6 @@ export type { Tab } from '@/components/NeTabs.vue'
 export type { NeNotification } from '@/components/NeToastNotification.vue'
 export type { NeListboxOption } from '@/components/NeListbox.vue'
 
-
 // library functions export
 export {
   sortByProperty,

diff --git a/stories/NeCombobox.stories.ts b/stories/NeCombobox.stories.ts
@@ -4,6 +4,8 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 
 import { NeCombobox, NeTooltip } from '../src/main'
+import { faStar, faBell, faEarthAmericas } from '@fortawesome/free-solid-svg-icons'
+import { library } from '@fortawesome/fontawesome-svg-core'
 
 const meta = {
   title: 'NeCombobox',
@@ -175,6 +177,28 @@ export const OptionsWithDescription: Story = {
   }
 }
 
+library.add(faStar)
+library.add(faBell)
+library.add(faEarthAmericas)
+
+export const OptionsWithIcon: Story = {
+  render: (args) => ({
+    components: { NeCombobox },
+    setup() {
+      return { args }
+    },
+    template: template
+  }),
+  args: {
+    label: 'Choose',
+    options: [
+      { id: '1', label: 'First option', description: 'Description', icon: faStar },
+      { id: '2', label: 'Second option', icon: faBell },
+      { id: '3', label: 'Third option', icon: faEarthAmericas }
+    ]
+  }
+}
+
 export const NoOptions: Story = {
   render: (args) => ({
     components: { NeCombobox },