Invalid prop: custom validator check failed for prop "color" - using USelectMenu #94
Description
I am a, not very experienced Nuxt3 , hobby developer. Also very new to TypeScript.
I use a USelectMenu element, and I want to use a dynamic color for the outline of the button.
When I view in the browser the page looks fine, everything how I want it, but I get the following error in the browser console for every instance of the component.
[Vue warn]: Invalid prop: custom validator check failed for prop "color". ( runtime-core/dist/runtime-core.esm-bundler.js )
This is the code I use:
The component:
<USelectMenu
v-model="row.transaction_type"
value-attribute="id"
option-attibute="label"
class="w-[160px] rounded-md"
selected-icon="i-heroicons-check-circle-20-solid"
:options="trans_types"
:icon="get_transType_icon( row.transaction_type )"
:color="get_transType_btn_color( row.transaction_type )"
:uiMenu="{
option: {
base: 'h-8 relative',
active: 'bg-mmmPrimary-100 rounded-none border-y border-mmmPrimary-300',
selectedIcon: {
wrapper: 'absolute right-[5px]',
padding: '',
base: 'text-mmmPrimary-500/70 size-[15px]',
},
}
}">
{{ label here }}
</USelectMenu>
The function that returns the color:
<script lang=ts setup>
import type { SelectColor } from '#ui/types'
// Get the color for the button outline
const get_transType_btn_color = ( transType_id: string ): SelectColor|undefined => {
switch ( trans_types.find( o => o.id === transType_id)?.id ) {
case 'IN':
return 'mmmAmountIn' as SelectColor
break
case 'OUT':
return 'mmmAmountOut' as SelectColor
break
case 'LOAN_IN':
case 'LOAN_OUT':
return 'mmmAmountLoan' as SelectColor
break
case 'SAVE_IN':
case 'SAVE_OUT':
return 'mmmAmountSave' as SelectColor
break
}
}
</script>The documentation for USelectMenu says the color prop should be of type string, but when I return a string, vscode gives me the following error:
Type 'string | undefined' is not assignable to type 'SelectColor | undefined'.
Type 'string' is not assignable to type 'SelectColor | undefined'.Am I doing something wrong here, or is this a bug?