feat(SelectMenu): allow creating option despite search (#1080)

* chore: initial

* chore: use reusable vnode

* fix: use component with vnode

* chore: option placement

* chore: finish

* up

* up

* up

* fix(selectmenu): non-object custom options

* up

---------

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/components/content/examples/SelectMenuExampleCreatable.vue

@@ -23,6 +23,7 @@ const labels = computed({
 
       // In a real app, you would make an API call to create the label
       const response = {
+        id: options.value.length + 1,
         name: label.name,
         color: generateColorFromString(label.name)
       }

docs/components/content/examples/SelectMenuExampleCreatableAlways.vue

@@ -0,0 +1,53 @@
+<script setup>
+const options = ref([
+  { id: 1, name: 'bug' },
+  { id: 2, name: 'documentation' },
+  { id: 3, name: 'duplicate' },
+  { id: 4, name: 'enhancement' },
+  { id: 5, name: 'good first issue' },
+  { id: 6, name: 'help wanted' },
+  { id: 7, name: 'invalid' },
+  { id: 8, name: 'question' },
+  { id: 9, name: 'wontfix' }
+])
+
+const selected = ref([])
+
+const labels = computed({
+  get: () => selected.value,
+  set: async (labels) => {
+    const promises = labels.map(async (label) => {
+      if (label.id) {
+        return label
+      }
+
+      // In a real app, you would make an API call to create the label
+      const response = {
+        id: options.value.length + 1,
+        name: label.name
+      }
+
+      options.value.push(response)
+
+      return response
+    })
+
+    selected.value = await Promise.all(promises)
+  }
+})
+</script>
+
+<template>
+  <USelectMenu
+    v-model="labels"
+    by="id"
+    name="labels"
+    :options="options"
+    option-attribute="name"
+    multiple
+    searchable
+    creatable
+    show-create-option-when="always"
+    placeholder="Select labels"
+  />
+</template>

docs/content/3.forms/4.select-menu.md

@@ -117,6 +117,8 @@ componentProps:
 
 By default, the search query will be kept after the menu is closed. To clear it on close, set the `clear-search-on-close` prop.
 
+You can also configure this globally through the `ui.selectMenu.default.clearSearchOnClose` config. Defaults to `false`.
+
 ::component-card
 ---
 baseProps:
@@ -158,6 +160,20 @@ componentProps:
 ---
 ::
 
+However, if you want to create options despite search query (apart from exact match), you can set the `show-create-option-when` prop to `'always'`.
+
+You can also configure this globally through the `ui.selectMenu.default.showCreateOptionWhen` config. Defaults to `empty`.
+
+Try to search for something that exists in the example below, but not an exact match.
+
+::component-example
+---
+component: 'select-menu-example-creatable-always'
+componentProps:
+  class: 'w-full lg:w-48'
+---
+::
+
 ## Popper
 
 Use the `popper` prop to customize the popper instance.