feat(InputMenu/SelectMenu): add create-item prop

[ineshbose]

🔗 Linked issue

Resolves #2434

❓ 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

Re-adds creatable to SelectMenu (maybe this should also exist in InputMenu too).

Let me know if this was intentionally left out (@benjamincanac)

📝 Checklist

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

/cc @sandros94

[benjamincanac]

I first left it out because I thought to let the users define it using the items prop for more flexibility but now that I think of it the filtered results are not exposed.

[pkg-pr-new]

pnpm add https://pkg.pr.new/@nuxt/ui@2472

commit: 38b962c

[benjamincanac]

I just tried the docs examples for both InputMenu and SelectMenu, when clicking the Add ... I get this warning:

[Vue warn]: Invalid prop: type check failed for prop "modelValue". Expected String | Number, got Boolean with value true. 

[ineshbose]

I just tried the docs examples for both InputMenu and SelectMenu, when clicking the Add ... I get this warning:

[Vue warn]: Invalid prop: type check failed for prop "modelValue". Expected String | Number, got Boolean with value true. 

Thanks for pointing out - sorry I wasn't 100% sure of how to use the component-code prose for the docs. It should be fine now!

[benjamincanac]

What is the intent behind the create event? To add to the initial array?

There is an error inside, it's typed with the value but receives the event (from the @select on the ComboboxItem). Maybe we should have the event and the value?

[ineshbose]

What is the intent behind the create event? To add to the initial array?

Yes, I think its an explicit event for any developer to know when the create has happened.

There is an error inside, it's typed with the value but receives the event (from the @select on the ComboboxItem). Maybe we should have the event and the value?

Hmm, I suppose the better type for it is V extends string ? Record<V | '[label] (should be keyof T)', string> : string

[benjamincanac]

No I meant, the first parameter you receive when using @create is an Event not the item value.

[ineshbose]

No I meant, the first parameter you receive when using @create is an Event not the item value.

Oh! My bad. I think that will also contain the target value as string too!

[benjamincanac]

@ineshbose For the docs, don't you think it would be better in the examples section? We could demonstrate a real example with @create event.

[ineshbose]

@ineshbose For the docs, don't you think it would be better in the examples section? We could demonstrate a real example with @create event.

Does that replace the currently added section or in addition to that? Quite indecisive when writing docs myself, so if you've got ideas - fire away! 😄

[benjamincanac]

Sure, I'll take care of it 😊

[benjamincanac]

Before I start the docs, how are we supposed to get the created item from the @create event? 🤔

[ineshbose]

Before I start the docs, how are we supposed to get the created item from the @create event? 🤔

it would be similar to onSelect! Value should be e.target.value

[benjamincanac]

@ineshbose FYI I've updated the docs a bit and handled the locale for "Create".

[benjamincanac]

I also just added the item as second argument of the create event. It's different than @select since it's binded on item.onSelect (you don't need to know which item it is).

[benjamincanac]

Thanks @ineshbose!