diff --git a/docs/api/props.md b/docs/api/props.md index cfe3aca..9120826 100644 --- a/docs/api/props.md +++ b/docs/api/props.md @@ -521,6 +521,26 @@ selectOnTab: { } ``` +## shouldNoOptionsSlotDisplay + +```js +/** + * Determines whether the no options slot + * will be displayed. + * + * Receives the component instance as the only argument. + * + * @since v3.13.0 + * @return boolean + */ +shouldNoOptionsSlotDisplay: { + type: Function, + default({ filteredOptions }) { + return filteredOptions.length === 0 + } +} +``` + ## tabindex diff --git a/src/components/Select.vue b/src/components/Select.vue index c73b6a7..13472ca 100644 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -70,7 +70,7 @@ {{ getOptionLabel(option) }} -
  • +
  • Sorry, no matching options.
  • @@ -579,6 +579,22 @@ default({noDrop, open, mutableLoading}) { return noDrop ? false : open && !mutableLoading; } + }, + + /** + * Determines whether the no options slot + * will be displayed. + * + * Receives the component instance as the only argument. + * + * @since v3.13.0 + * @return boolean + */ + noOptionsSlotShouldDisplay: { + type: Function, + default({filteredOptions}) { + return filteredOptions.length === 0 + } } }, @@ -1200,6 +1216,14 @@ showClearButton() { return !this.multiple && this.clearable && !this.open && !this.isValueEmpty }, + + /** + * Determine if the no options slot should be displayed. + * @returns {Boolean} + */ + showNoOptionsSlot() { + return !! this.noOptionsSlotShouldDisplay(this) + } }, } diff --git a/tests/unit/Slots.spec.js b/tests/unit/Slots.spec.js index 955829b..b439db0 100644 --- a/tests/unit/Slots.spec.js +++ b/tests/unit/Slots.spec.js @@ -1,4 +1,4 @@ -import { mountDefault } from '../helpers'; +import { mountDefault, selectWithProps } from '../helpers'; describe('Scoped Slots', () => { it('receives an option object to the selected-option-container slot', () => { @@ -74,6 +74,20 @@ describe('Scoped Slots', () => { }) }); + test('no options slot can be hidden', async () => { + const Select = selectWithProps({ + noOptionsSlotShouldDisplay: () => false, + options: [] + }); + + Select.vm.open = true; + await Select.vm.$nextTick(); + + expect(Select.classes('vs--open')).toBeTruthy(); + expect(Select.find('.vs__dropdown-menu li')).toBeTruthy(); + expect(Select.find('.vs__no-options').exists()).toBeFalsy(); + }); + test('header slot props', async () => { const header = jest.fn(); const Select = mountDefault({}, {