From 6d14c77e89108777790c4c51c8399cc2cdfcd4be Mon Sep 17 00:00:00 2001 From: Vincent Ratier Date: Mon, 10 Jun 2024 15:43:24 +0100 Subject: [PATCH 1/3] feat(SelectMenu): use a function to show or hide the create option --- .../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 0000000000..28fdadb09b --- /dev/null +++ b/docs/components/content/examples/SelectMenuExampleCreatableFunction.vue @@ -0,0 +1,60 @@ + + + diff --git a/docs/content/2.components/select-menu.md b/docs/content/2.components/select-menu.md index eb4a261f1f..3626eebccd 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 948b9d54fd..f054f98886 100644 --- a/src/runtime/components/forms/SelectMenu.vue +++ b/src/runtime/components/forms/SelectMenu.vue @@ -266,7 +266,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: { @@ -491,7 +491,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 } }) From 693293d6d0ae5d0e28663ea2249857c3ddc152d2 Mon Sep 17 00:00:00 2001 From: Vincent Ratier Date: Thu, 13 Jun 2024 12:59:51 +0100 Subject: [PATCH 2/3] fixed code & example --- .../content/examples/SelectMenuExampleCreatableFunction.vue | 2 +- src/runtime/components/forms/SelectMenu.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/components/content/examples/SelectMenuExampleCreatableFunction.vue b/docs/components/content/examples/SelectMenuExampleCreatableFunction.vue index 28fdadb09b..1df5d2b8a3 100644 --- a/docs/components/content/examples/SelectMenuExampleCreatableFunction.vue +++ b/docs/components/content/examples/SelectMenuExampleCreatableFunction.vue @@ -38,7 +38,7 @@ const labels = computed({ const showCreateOption = (query, results) => { const lowercaseQuery = String.prototype.toLowerCase.apply(query || "") - return results.find(option => { + return lowercaseQuery.length >= 3 && !results.find(option => { return String.prototype.toLowerCase.apply(option["name"] || "") === lowercaseQuery }) } diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue index f054f98886..40a14d423b 100644 --- a/src/runtime/components/forms/SelectMenu.vue +++ b/src/runtime/components/forms/SelectMenu.vue @@ -492,7 +492,7 @@ export default defineComponent({ } } if (typeof props.showCreateOptionWhen === 'function') { - if(props.showCreateOptionWhen(query.value, filteredOptions.value)){ + if(!props.showCreateOptionWhen(query.value, filteredOptions.value)){ return null } } From a6504b73b1b26c02c840db57012fa40dd21a3082 Mon Sep 17 00:00:00 2001 From: Vincent Ratier Date: Thu, 18 Jul 2024 11:05:25 +0100 Subject: [PATCH 3/3] fix: lint --- .../content/examples/SelectMenuExampleCreatableFunction.vue | 4 ++-- src/runtime/components/forms/SelectMenu.vue | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/components/content/examples/SelectMenuExampleCreatableFunction.vue b/docs/components/content/examples/SelectMenuExampleCreatableFunction.vue index 1df5d2b8a3..c766b58c2a 100644 --- a/docs/components/content/examples/SelectMenuExampleCreatableFunction.vue +++ b/docs/components/content/examples/SelectMenuExampleCreatableFunction.vue @@ -37,9 +37,9 @@ const labels = computed({ }) const showCreateOption = (query, results) => { - const lowercaseQuery = String.prototype.toLowerCase.apply(query || "") + const lowercaseQuery = String.prototype.toLowerCase.apply(query || '') return lowercaseQuery.length >= 3 && !results.find(option => { - return String.prototype.toLowerCase.apply(option["name"] || "") === lowercaseQuery + return String.prototype.toLowerCase.apply(option['name'] || '') === lowercaseQuery }) } diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue index a36d407340..b151f9b341 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, Function] as PropType<'always' | 'empty' | ((query:string, results: any[]) => boolean)>, + type: [String, Function] as PropType<'always' | 'empty' | ((query: string, results: any[]) => boolean)>, default: () => configMenu.default.showCreateOptionWhen }, placeholder: { @@ -495,7 +495,7 @@ export default defineComponent({ } } if (typeof props.showCreateOptionWhen === 'function') { - if(!props.showCreateOptionWhen(query.value, filteredOptions.value)){ + if (!props.showCreateOptionWhen(query.value, filteredOptions.value)) { return null } }