From 7e974b55d72b8ac0ab42ef722a2d1904c3e4e091 Mon Sep 17 00:00:00 2001
From: Vincent Ratier <vincentratier@gmail.com>
Date: Thu, 18 Jul 2024 12:51:01 +0100
Subject: [PATCH] feat(SelectMenu): handle function in `showCreateOptionWhen`
 prop (#1853)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 .../SelectMenuExampleCreatableFunction.vue    | 60 +++++++++++++++++++
 docs/content/2.components/select-menu.md      | 12 ++++
 src/runtime/components/forms/SelectMenu.vue   |  8 ++-
 3 files changed, 78 insertions(+), 2 deletions(-)
 create mode 100644 docs/components/content/examples/SelectMenuExampleCreatableFunction.vue

diff --git a/docs/components/content/examples/SelectMenuExampleCreatableFunction.vue b/docs/components/content/examples/SelectMenuExampleCreatableFunction.vue
new file mode 100644
index 00000000..c766b58c
--- /dev/null
+++ b/docs/components/content/examples/SelectMenuExampleCreatableFunction.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+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)
+  }
+})
+
+const showCreateOption = (query, results) => {
+  const lowercaseQuery = String.prototype.toLowerCase.apply(query || '')
+  return lowercaseQuery.length >= 3 && !results.find(option => {
+    return String.prototype.toLowerCase.apply(option['name'] || '') === lowercaseQuery
+  })
+}
+</script>
+
+<template>
+  <USelectMenu
+    v-model="labels"
+    by="id"
+    name="labels"
+    :options="options"
+    option-attribute="name"
+    multiple
+    searchable
+    creatable
+    :show-create-option-when="showCreateOption"
+    placeholder="Select labels"
+  />
+</template>
diff --git a/docs/content/2.components/select-menu.md b/docs/content/2.components/select-menu.md
index fad9c161..496de7a0 100644
--- a/docs/content/2.components/select-menu.md
+++ b/docs/content/2.components/select-menu.md
@@ -188,6 +188,18 @@ componentProps:
 ---
 ::
 
+Pass a function to the `show-create-option-when` prop to control wether or not to show the create option. This function takes two arguments: the query (as the first argument) and an array of current results (as the second argument). It should return true to display the create option.
+
+The example below shows how to make the create option visible when the query is at least three characters long and does not exactly match any of the current results (case insensitive).
+
+::component-example
+---
+component: 'select-menu-example-creatable-function'
+componentProps:
+  class: 'w-full lg:w-48'
+---
+::
+
 ## Popper
 
 Use the `popper` prop to customize the popper instance.
diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue
index 843d202a..b151f9b3 100644
--- a/src/runtime/components/forms/SelectMenu.vue
+++ b/src/runtime/components/forms/SelectMenu.vue
@@ -265,7 +265,7 @@ export default defineComponent({
       default: false
     },
     showCreateOptionWhen: {
-      type: String as PropType<'always' | 'empty'>,
+      type: [String, Function] as PropType<'always' | 'empty' | ((query: string, results: any[]) => boolean)>,
       default: () => configMenu.default.showCreateOptionWhen
     },
     placeholder: {
@@ -494,7 +494,11 @@ export default defineComponent({
           return null
         }
       }
-
+      if (typeof props.showCreateOptionWhen === 'function') {
+        if (!props.showCreateOptionWhen(query.value, filteredOptions.value)) {
+          return null
+        }
+      }
       return ['string', 'number'].includes(typeof props.modelValue) ? query.value : { [props.optionAttribute]: query.value }
     })