feat: allow setting custom value display for single select

src/Multiselect.vue

@@ -259,13 +259,14 @@ export default defineComponent({
       },
     },
     /**
-     * Alters the displayed label if multiple selection mode is active.
+     * Alters the displayed label.
      * Can be a string or a function returning a string.
-     * The passed parameter of the function is an array of the selected options.
-     * By default, it displays the amount of selected options
+     * The passed parameter of the function is the selected option in single mode or an array of the selected options in multiple mode.
+     * By default, it displays the amount of selected options in multiple mode.
+     * In single mode the selected options label (optionLabel) is displayed.
      */
     displaySelectedValues: {
-      type: [Function, String] as PropType<((options: Array<Option | unknown>) => string) | string>,
+      type: [Function, String] as PropType<((option: Option | unknown) => string) | ((options: Array<Option | unknown>) => string) | string>,
       required: false,
       default: undefined,
     },

src/tests/multiselect.cy.js

@@ -204,6 +204,37 @@ describe('Multiselect Component', () => {
         cy.get('[data-cy="value-display"]').contains('Was geht denn ab')
     })
 
+    it('can have custom value display in single selection mode', () => {
+        const selectOptions = [{value: {abc: 'xyz', test: {xyz: 3}}, label: 'This', displayLabel: 'Hallo'}, {
+            value: 2,
+            label: 'is',
+            displayLabel: 'wie'
+        }, {value: 'haha', label: 'a', displayLabel: 'geht\'s'}, {value: 4, label: 'test', displayLabel: 'dir?'}]
+
+        function singleLabelFunc(selectedOptions) {
+            return selectedOptions.displayLabel
+        }
+
+        cy.mount(MultiselectTester, {
+            props: {
+                selectOptions: selectOptions,
+                multiple: false,
+                displaySelectedValues: singleLabelFunc
+            },
+        })
+
+        cy.get('[data-cy="multiselect"]').click()
+        cy.get('[data-cy="dropdown"]').should('be.visible')
+        cy.get('[data-cy="option"]').eq(0).click()
+        cy.get('[data-cy="value-display"]').contains('Hallo')
+        cy.get('[data-cy="option"]').eq(1).click()
+        cy.get('[data-cy="value-display"]').contains('wie')
+        cy.get('[data-cy="option"]').eq(2).click()
+        cy.get('[data-cy="value-display"]').contains('geht\'s')
+        cy.get('[data-cy="option"]').eq(3).click()
+        cy.get('[data-cy="value-display"]').contains('dir?')
+    })
+
     it('should close the dropdown on selection', () => {
         const selectOptions = [{value: {abc: 'xyz', test: {xyz: 3}}, label: 'This'}, {
             value: 2,

src/utils/useOptions.ts

@@ -7,7 +7,7 @@ export default function useOptions(multiple: Ref<boolean>,
   modelValue: Ref,
   closeOnSelect: Ref<boolean>,
   selectOptions: Ref<Array<Option | unknown>>,
-  displaySelectedValues: Ref<((options: Array<Option | unknown>) => string) | string | undefined>,
+  displaySelectedValues: Ref<((option: Option | unknown) => string) | ((options: Array<Option | unknown>) => string) | string | undefined>,
   optionValue: Ref<(option: Option | unknown) => unknown>,
   optionLabel: Ref<(option: Option | unknown, selectedOptions: Array<Option | unknown>) => string>,
   optionDisabled: Ref<(option: Option | unknown, selectedOptions: Array<Option | unknown>) => boolean>,
@@ -175,19 +175,19 @@ export default function useOptions(multiple: Ref<boolean>,
   }
 
   const valueDisplayText = computed(() => {
+    if (displaySelectedValues && displaySelectedValues.value) {
+      if (typeof displaySelectedValues.value === 'string' || displaySelectedValues.value instanceof String)
+        return displaySelectedValues.value
+      else
+        return multiple.value ? displaySelectedValues.value(selectedOptions.value) : (displaySelectedValues.value as (option: Option | unknown) => string)(selectedOptions.value[0])
+    }
+
     if (multiple.value) {
-      if (displaySelectedValues && displaySelectedValues.value) {
-        if (typeof displaySelectedValues.value === 'string' || displaySelectedValues.value instanceof String)
-          return displaySelectedValues.value
-        else
-          return displaySelectedValues.value(selectedOptions.value)
-      }
-      else {
-        // default multiple label
-        return selectedOptions.value && selectedOptions.value.length > 1 ? `${selectedOptions.value.length} Optionen gewählt` : '1 Option gewählt'
-      }
+      // default multiple mode label
+      return selectedOptions.value && selectedOptions.value.length > 1 ? `${selectedOptions.value.length} Optionen gewählt` : '1 Option gewählt'
     }
     else {
+      // default single mode label
       return optionLabel.value(selectedOptions.value[0], selectedOptions.value)
     }
   })