diff --git a/src/Multiselect.vue b/src/Multiselect.vue
index 9ca9e6e..1277971 100644
--- a/src/Multiselect.vue
+++ b/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) => string) | string>,
+ type: [Function, String] as PropType<((option: Option | unknown) => string) | ((options: Array ) => string) | string>,
required: false,
default: undefined,
},
diff --git a/src/tests/multiselect.cy.js b/src/tests/multiselect.cy.js
index 4d2282a..7575d76 100644
--- a/src/tests/multiselect.cy.js
+++ b/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,
diff --git a/src/utils/useOptions.ts b/src/utils/useOptions.ts
index 60c5dc7..6e20b72 100644
--- a/src/utils/useOptions.ts
+++ b/src/utils/useOptions.ts
@@ -7,7 +7,7 @@ export default function useOptions(multiple: Ref,
modelValue: Ref,
closeOnSelect: Ref,
selectOptions: Ref>,
- displaySelectedValues: Ref<((options: Array) => string) | string | undefined>,
+ displaySelectedValues: Ref<((option: Option | unknown) => string) | ((options: Array ) => string) | string | undefined>,
optionValue: Ref<(option: Option | unknown) => unknown>,
optionLabel: Ref<(option: Option | unknown, selectedOptions: Array ) => string>,
optionDisabled: Ref<(option: Option | unknown, selectedOptions: Array ) => boolean>,
@@ -175,19 +175,19 @@ export default function useOptions(multiple: Ref,
}
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)
}
})