diff --git a/docs/content/meta/ComboboxRoot.md b/docs/content/meta/ComboboxRoot.md index 1f0f0ed26..49a09eb0b 100644 --- a/docs/content/meta/ComboboxRoot.md +++ b/docs/content/meta/ComboboxRoot.md @@ -81,6 +81,13 @@ 'required': false, 'default': 'true' }, + { + 'name': 'resetSearchTermOnSelect', + 'description': '

Whether to reset the searchTerm when the Combobox value is selected

\n', + 'type': 'boolean', + 'required': false, + 'default': 'true' + }, { 'name': 'searchTerm', 'description': '

The controlled search term of the Combobox. Can be binded with with v-model:searchTerm.

\n', diff --git a/packages/plugins/src/namespaced/generate.ts b/packages/plugins/src/namespaced/generate.ts index b5467f09a..4599682df 100644 --- a/packages/plugins/src/namespaced/generate.ts +++ b/packages/plugins/src/namespaced/generate.ts @@ -21,10 +21,10 @@ const namespaced = filteredComponent.map((curr: keyof typeof components) => { } else { return `export const ${key} = {\n${ - Object.keys(tmp).map((k) => { return ` ${k}: ${tmp[k]},\n` }).join('') + Object.keys(tmp).map((k) => { return ` ${k}: ${tmp[k]},\n` }).join('') }} as {\n${Object.keys(tmp).map((k) => { - return ` ${k}: typeof ${tmp[k]}\n` - }).join('')}}` + return ` ${k}: typeof ${tmp[k]}\n` + }).join('')}}` } }) diff --git a/packages/radix-vue/src/Combobox/ComboboxRoot.vue b/packages/radix-vue/src/Combobox/ComboboxRoot.vue index 3113a8862..7e8d9d189 100644 --- a/packages/radix-vue/src/Combobox/ComboboxRoot.vue +++ b/packages/radix-vue/src/Combobox/ComboboxRoot.vue @@ -77,6 +77,11 @@ export interface ComboboxRootProps extends PrimitiveProps { * @defaultValue `true` */ resetSearchTermOnBlur?: boolean + /** + * Whether to reset the searchTerm when the Combobox value is selected + * @defaultValue `true` + */ + resetSearchTermOnSelect?: boolean } @@ -91,6 +96,7 @@ import isEqual from 'fast-deep-equal' const props = withDefaults(defineProps>(), { open: undefined, resetSearchTermOnBlur: true, + resetSearchTermOnSelect: true, }) const emit = defineEmits>() @@ -148,7 +154,7 @@ async function onOpenChange(val: boolean) { else { isUserInputted.value = false if (props.resetSearchTermOnBlur) - resetSearchTerm() + resetSearchTerm('blur') } } @@ -194,16 +200,19 @@ const filteredOptions = computed(() => { return options.value }) -function resetSearchTerm() { +function resetSearchTerm(mode?: 'blur' | 'select') { + // clear when blur or when select and resetSearchTermOnSelect is true + const condition = mode === 'blur' || (mode === 'select' && props.resetSearchTermOnSelect) + if (!multiple.value && modelValue.value && !Array.isArray(modelValue.value)) { if (props.displayValue) searchTerm.value = props.displayValue(modelValue.value) else if (typeof modelValue.value !== 'object') searchTerm.value = modelValue.value.toString() - else + else if (condition) searchTerm.value = '' } - else { + else if (condition) { searchTerm.value = '' } } @@ -219,7 +228,7 @@ const stringifiedModelValue = computed(() => JSON.stringify(modelValue.value)) watch(stringifiedModelValue, async () => { await nextTick() await nextTick() - resetSearchTerm() + resetSearchTerm('select') }, { // If searchTerm is provided with value during initialization, we don't reset it immediately immediate: !props.searchTerm, diff --git a/packages/radix-vue/src/Menu/MenuRoot.vue b/packages/radix-vue/src/Menu/MenuRoot.vue index 7feea2aa8..c08427968 100644 --- a/packages/radix-vue/src/Menu/MenuRoot.vue +++ b/packages/radix-vue/src/Menu/MenuRoot.vue @@ -50,9 +50,7 @@ export const [injectMenuRootContext, provideMenuRootContext] import { ref, toRefs, - watchEffect, } from 'vue' -import { isClient } from '@vueuse/shared' import { useVModel } from '@vueuse/core' import { PopperRoot } from '@/Popper' diff --git a/packages/radix-vue/src/Splitter/SplitterGroup.vue b/packages/radix-vue/src/Splitter/SplitterGroup.vue index 34c46086a..92be7094a 100644 --- a/packages/radix-vue/src/Splitter/SplitterGroup.vue +++ b/packages/radix-vue/src/Splitter/SplitterGroup.vue @@ -522,7 +522,7 @@ function collapsePanel(panelData: PanelData) { assert( panelSize != null, - `Panel size not found for panel "${panelData.id}"`, + `Panel size not found for panel "${panelData.id}"`, ) if (panelSize !== collapsedSize) { @@ -625,7 +625,7 @@ function getPanelSize(panelData: PanelData) { assert( panelSize != null, - `Panel size not found for panel "${panelData.id}"`, + `Panel size not found for panel "${panelData.id}"`, ) return panelSize @@ -654,7 +654,7 @@ function isPanelExpanded(panelData: PanelData) { assert( panelSize != null, - `Panel size not found for panel "${panelData.id}"`, + `Panel size not found for panel "${panelData.id}"`, ) return !collapsible || panelSize > collapsedSize diff --git a/packages/radix-vue/src/shared/createContext.ts b/packages/radix-vue/src/shared/createContext.ts index 18977efe4..cf69d29a5 100644 --- a/packages/radix-vue/src/shared/createContext.ts +++ b/packages/radix-vue/src/shared/createContext.ts @@ -40,8 +40,8 @@ export function createContext( `Injection \`${injectionKey.toString()}\` not found. Component must be used within ${ Array.isArray(providerComponentName) ? `one of the following components: ${providerComponentName.join( - ', ', - )}` + ', ', + )}` : `\`${providerComponentName}\`` }`, ) diff --git a/packages/radix-vue/src/shared/useSingleOrMultipleValue.ts b/packages/radix-vue/src/shared/useSingleOrMultipleValue.ts index 9283d3252..b77e1fcba 100644 --- a/packages/radix-vue/src/shared/useSingleOrMultipleValue.ts +++ b/packages/radix-vue/src/shared/useSingleOrMultipleValue.ts @@ -21,7 +21,7 @@ function validateProps({ type, defaultValue, modelValue }: SingleOrMultipleProps if (modelValue !== undefined && defaultValue !== undefined && typeof modelValue !== typeof defaultValue) { throw new Error( - `Invalid prop \`value\` of value \`${modelValue}\` supplied, should be the same type as the \`defaultValue\` prop, which is \`${defaultValue}\`. The \`value\` prop must be: + `Invalid prop \`value\` of value \`${modelValue}\` supplied, should be the same type as the \`defaultValue\` prop, which is \`${defaultValue}\`. The \`value\` prop must be: ${type === 'single' ? '- a string' : type === 'multiple' ? '- an array of strings' : '- a string\n- an array of strings'} - \`undefined\``, )