-
- Create "{{ queryOption[optionAttribute] }}"
+
+ Create "{{ createOption[optionAttribute] }}"
@@ -247,7 +247,7 @@ export default defineComponent({
},
clearSearchOnClose: {
type: Boolean,
- default: () => configMenu.default.clearOnClose
+ default: () => configMenu.default.clearSearchOnClose
},
debounce: {
type: Number,
@@ -257,6 +257,10 @@ export default defineComponent({
type: Boolean,
default: false
},
+ showCreateOptionWhen: {
+ type: String as PropType<'always' | 'empty'>,
+ default: () => configMenu.default.showCreateOptionWhen
+ },
placeholder: {
type: String,
default: null
@@ -438,8 +442,21 @@ export default defineComponent({
})
})
- const queryOption = computed(() => {
- return query.value === '' ? null : { [props.optionAttribute]: query.value }
+ const createOption = computed(() => {
+ if (query.value === '') {
+ return null
+ }
+ if (props.showCreateOptionWhen === 'empty' && filteredOptions.value.length) {
+ return null
+ }
+ if (props.showCreateOptionWhen === 'always') {
+ const existingOption = filteredOptions.value.find(option => ['string', 'number'].includes(typeof option) ? option === query.value : option[props.optionAttribute] === query.value)
+ if (existingOption) {
+ return null
+ }
+ }
+
+ return ['string', 'number'].includes(typeof props.modelValue) ? query.value : { [props.optionAttribute]: query.value }
})
function clearOnClose () {
@@ -494,7 +511,7 @@ export default defineComponent({
trailingIconClass,
trailingWrapperIconClass,
filteredOptions,
- queryOption,
+ createOption,
query,
onUpdate
}
diff --git a/src/runtime/ui.config/forms/selectMenu.ts b/src/runtime/ui.config/forms/selectMenu.ts
index 9751d0091b..4add7aa878 100644
--- a/src/runtime/ui.config/forms/selectMenu.ts
+++ b/src/runtime/ui.config/forms/selectMenu.ts
@@ -22,7 +22,8 @@ export default {
},
default: {
selectedIcon: 'i-heroicons-check-20-solid',
- clearOnClose: false
+ clearSearchOnClose: false,
+ showCreateOptionWhen: 'empty'
},
arrow: {
...arrow,