feat(SelectMenu): handle function in showCreateOptionWhen prop

[vratier]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Adds the functionality to use a custom function to determine whether the create option should be displayed in a SelectMenu.

Example use cases:

• case insensitive comparison
• query minimal length

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[benjamincanac]

Why not pass this option to creatable prop? 🤔

[vratier]

Why not, but then wouldn't it also make sense to remove the showCreateOptionWhen prop and handle everything with creatable.
So creatable would be: false | "empty" | "always" | (query:string, results: any[]) => boolean

What do you think?

[benjamincanac]

Unfortunately, it's too late for that as it would cause a breaking change.

[vratier]

Of course, in that case wouldn't you agree that it makes more sense to do it with showCreateOptionWhen?
It would also avoid confusion in the case where creatable is a function which would render showCreateOptionWhen useless.

[benjamincanac]

Sorry but I don't understand your point, you just want to toggle the creatable state right?

You can pass the boolean to creatable which can be a computed or a ref for example:

<script setup lang="ts">
const creatable = ref(false)
</script>

<template>
  <USelectMenu :creatable="creatable" />
</template>

[vratier]

Sorry, I need to clarify...

What I'd like to do is the following:

1. SelectMenu is backed by a list of cities: ["Quimperlé"]
2. A user wants to add Quimper to the list
3. They type Quimper
4. The #option-create slot should now be visible

In this case we have to use always as the search does yield a result.

Later on the user wants to select Quimper from the list so they type quimper (lowercase q).
Using always, the #option-create slot will show, but I would prefer if it didn't.

The idea with this PR is to offer fine-grained control over the visibility of the #option-create slot:

• empty: show when no result
• always: show unless one of the results is an exact match (case sensitive)
• function: full control

Here's an illustration using the docs examples:

❌ Using always: not ideal as in my use case DOCUMENTATION = documentation

✅ Using a function

Sorry for the lengthy message. I hope everything is clear.

[benjamincanac]

Would you mind fixing the lint? 😊

[vratier]

All done, sorry about that 😄

[benjamincanac]

Thanks @vratier! 😊