feat: support options icon in NeCombobox

nethesis · Jun 20, 2024 · 61fb8ff · 61fb8ff
1 parent 04215a1
commit 61fb8ff
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 4 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
 }
@@ -372,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 },