diff --git a/docs/components/content/examples/SelectMenuExampleEmptySlot.vue b/docs/components/content/examples/SelectMenuExampleEmptySlot.vue new file mode 100644 index 0000000000..b7de74bc48 --- /dev/null +++ b/docs/components/content/examples/SelectMenuExampleEmptySlot.vue @@ -0,0 +1,13 @@ + + + diff --git a/docs/content/3.forms/4.select-menu.md b/docs/content/3.forms/4.select-menu.md index 1b7681dc9d..07bbf005de 100644 --- a/docs/content/3.forms/4.select-menu.md +++ b/docs/content/3.forms/4.select-menu.md @@ -232,6 +232,18 @@ Use the `#option-create` slot to customize the content displayed when the `creat An example is available in the [Create option](#create-option) section. :: +### `empty` + +Use the `#empty` slot to customize the content displayed when there is no options. Defaults to `No options.`. + +::component-example +--- +component: 'select-menu-example-empty-slot' +componentProps: + class: 'w-full lg:w-48' +--- +:: + ## Props :component-props diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue index 1cc1c472cb..dfc9dc967b 100644 --- a/src/runtime/components/forms/SelectMenu.vue +++ b/src/runtime/components/forms/SelectMenu.vue @@ -112,6 +112,11 @@ No results for "{{ query }}".

+

+ + No options. + +

diff --git a/src/runtime/ui.config/forms/selectMenu.ts b/src/runtime/ui.config/forms/selectMenu.ts index b2e436b7bd..2f33e741e2 100644 --- a/src/runtime/ui.config/forms/selectMenu.ts +++ b/src/runtime/ui.config/forms/selectMenu.ts @@ -15,6 +15,7 @@ export default { input: 'block w-[calc(100%+0.5rem)] focus:ring-transparent text-sm px-3 py-1.5 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border-0 border-b border-gray-200 dark:border-gray-700 focus:border-inherit sticky -top-1 -mt-1 mb-1 -mx-1 z-10 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none', required: 'absolute inset-0 w-px opacity-0 cursor-default', label: 'block truncate', + empty: 'text-sm text-gray-400 dark:text-gray-500 px-2 py-1.5', option: { base: 'cursor-default select-none relative flex items-center justify-between gap-1', rounded: 'rounded-md',