diff --git a/docs/content/2.components/select-menu.md b/docs/content/2.components/select-menu.md index f8503ebe..c8eaab24 100644 --- a/docs/content/2.components/select-menu.md +++ b/docs/content/2.components/select-menu.md @@ -85,7 +85,7 @@ Learn how to customize icons from the [Select](/components/select#icon) componen Use the `searchable` prop to enable search. -Use the `searchable-placeholder` prop to set a different placeholder. +Use the `searchable-placeholder` prop to set a different placeholder or globally through the `ui.selectMenu.default.searchablePlaceholder.label` config. Defaults to `Search...`. This will use Headless UI [Combobox](https://headlessui.com/v1/vue/combobox) component instead of [Listbox](https://headlessui.com/v1/vue/listbox). @@ -258,6 +258,8 @@ componentProps: Use the `#option-empty` slot to customize the content displayed when the `searchable` prop is `true` and there is no options. You will have access to the `query` property in the slot scope. +You can also configure this globally through the `ui.selectMenu.default.optionEmpty.label` config. The token `{query}` will be replaced by `query` property. Defaults to `No results for "{query}".`. + ::component-example --- component: 'select-menu-example-option-empty-slot' @@ -276,7 +278,9 @@ An example is available in the [Creatable](#creatable) section. ### `empty` -Use the `#empty` slot to customize the content displayed when there is no options. Defaults to `No options.`. +Use the `#empty` slot to customize the content displayed when there is no options. + +You can also configure this globally through the `ui.selectMenu.default.empty.label` config. Defaults to `No options.`. ::component-example --- diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue index cdd829e3..835cbbe6 100644 --- a/src/runtime/components/forms/SelectMenu.vue +++ b/src/runtime/components/forms/SelectMenu.vue @@ -107,12 +107,12 @@

- No results for "{{ query }}". + {{ uiMenu.default.optionEmpty.label.replace('{query}', query) }}

- No options. + {{ uiMenu.default.empty.label }}

@@ -247,7 +247,7 @@ export default defineComponent({ }, searchablePlaceholder: { type: String, - default: 'Search...' + default: () => configMenu.default.searchablePlaceholder.label }, searchableLazy: { type: Boolean, diff --git a/src/runtime/ui.config/forms/selectMenu.ts b/src/runtime/ui.config/forms/selectMenu.ts index 7f696ae3..96b56686 100644 --- a/src/runtime/ui.config/forms/selectMenu.ts +++ b/src/runtime/ui.config/forms/selectMenu.ts @@ -23,7 +23,16 @@ export default { default: { selectedIcon: 'i-heroicons-check-20-solid', clearSearchOnClose: false, - showCreateOptionWhen: 'empty' + showCreateOptionWhen: 'empty', + searchablePlaceholder: { + label: 'Search...' + }, + empty: { + label: 'No options.' + }, + optionEmpty: { + label: 'No results for "{query}".' + } }, arrow: { ...arrow,