feat(SelectMenu): allows to customize labels

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
 ---

src/runtime/components/forms/SelectMenu.vue

@@ -107,12 +107,12 @@
  </component>
  <p v-else-if="searchable && query && !filteredOptions?.length" :class="uiMenu.option.empty">
  <slot name="option-empty" :query="query">
- No results for "{{ query }}".
+ {{ uiMenu.default.optionEmpty.label.replace('{query}', query) }}
  </slot>
  </p>
  <p v-else-if="!filteredOptions?.length" :class="uiMenu.empty">
  <slot name="empty" :query="query">
- No options.
+ {{ uiMenu.default.empty.label }}
  </slot>
  </p>
  </component>
@@ -247,7 +247,7 @@ export default defineComponent({
  },
  searchablePlaceholder: {
  type: String,
- default: 'Search...'
+ default: () => configMenu.default.searchablePlaceholder.label
  },
  searchableLazy: {
  type: Boolean,

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,