feat(SelectMenu): add empty slot when no options

Resolves #1089

docs/components/content/examples/SelectMenuExampleEmptySlot.vue

@@ -0,0 +1,13 @@
+<script setup>
+const people = []
+
+const selected = ref()
+</script>
+
+<template>
+  <USelectMenu v-model="selected" :options="people">
+    <template #empty>
+      No people
+    </template>
+  </USelectMenu>
+</template>

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

src/runtime/components/forms/SelectMenu.vue

@@ -112,6 +112,11 @@
                 No results for "{{ query }}".
               </slot>
             </p>
+            <p v-else-if="!filteredOptions.length" :class="uiMenu.empty">
+              <slot name="empty" :query="query">
+                No options.
+              </slot>
+            </p>
           </component>
         </div>
       </Transition>

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