🚀 Transferring useful composables from Anu UI lib to VueUse

[jd-solanki]

Clear and concise description of the problem

Hi @antfu,

As we will be releasing v10 of VueUse which will have major features I want to contribute some composables from Anu.

Following "Slowing down new functions" warning I'm creating this issue to ask for approval for adding these composables.

Below is list of composables I'm willing to transfer to VueUse:

1. useParentElement: Get parent element of component
2. useInternalBooleanState*: Inspired from Michael Thiessen's newsletter this creates internal state for prop. (*existing implementation in anu is for boolean prop and will be generic in VueUse)
3. (& 4) useSearch & useSort: Both composables can be great addition to VueUse as this will allow creating complex things like autocomplete & tables. Anu already uses it internally for table and in needed areas. However, I need some help from VueUse community to improve it further for general usage.
4. useGroupModel: My most favorite and super useful composable that let's you create v-model like binding for group. Here's demo on what it can offer. It is also used internally for components like select.

I will be more than happy to see these composables in VueUse itself if you allow. Definitely I will need some help with TypeScript to improve it. I guess @okxiaoliang4 can help me with getting this composables to VueUse if you allow this.

Please let me know your thoughts on this, Thanks ❤️

Suggested solution

n/a

Alternative

n/a

Additional context

I'm also planning for a new release of Anu and now thinking of making a release with the update of VueUse v10. May I know what will be ETA of v10 to better organize Anu release?

Regards,
JD

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[Alfred-Skyblue]

useFuse implements useSearch, useSorted implements useSort, I remember some time ago I created a PR #2794 for useSearch.

[jd-solanki]

useFuse implements useSearch, useSorted implements useSort, I remember some time ago I created a PR #2794 for useSearch.

@Alfred-Skyblue Thanks for your attention. Yes, useFuse exist but it requires third-party library integration which might not need by all people. Regarding useSorted, we can improve it further so that it can:

• handle dates
• handle sorting objects without passing compare function via top level key
• handling order (asc/desc) etc

BTW, this is just a proposal. We can completely ignore this and release what's already decided 😇

[antfu]

1. It sounds useful, we could have it
2. It seems like useModel with passive: true?
3. As @Alfred-Skyblue mentioned. For search, I think in-house searching might not satisfy all the needs (e.g. fuzzy search can be a very complex thing that will be out-of-scope of VueUse). for useSort we already have useSorted, we could improve it.
4. I am not sure if I understand how it works

[jd-solanki]

@antfu thanks for the review.

It sounds useful, we could have it

Will make a PR

It seems like useModel with passive: true?

Yes, it can be. I didn't knew about that passive option 🤩

very complex thing that will be out-of-scope of VueUse

Agreed 👍

I am not sure if I understand how it works

Basically it lets you create radio and checkbox like functionality where you can select value from defined options programmatically but without radio and checkbox. Have you checked the demo?

[jd-solanki]

Made a PR for useParentElement 😇

If you ask me useGroupModel is really useful composable if you check the demo and what it can provide. If it sounds confusing you can name it useChoices. I hope you read the provided description of useGroupModel:

Basically it lets you create radio and checkbox like functionality where you can select value from defined options programmatically but without radio and checkbox UI/Element.

ATM, useGroupModel composable is used in select, checkbox, switch, list & tabs components 😯

[jd-solanki]

First of all, I would like to apologize for not updating the useParentElement because I was busy with personal life stuff 🙏🏻

Now, We are ready to close this issue if we get a decision on useGroupModel. I wanted to follow up on the issue regarding the useGroupModel composable, as I believe it has the potential to be a valuable addition to VueUse and benefit the wider community.

As you know, the useGroupModel composable allows easy selection of options from a set, with support for multiple selections and index-based options. I believe this functionality would be useful in a variety of scenarios, from creating components select, list
(selectable items), checkbox, switch, tabs etc.

Let's name it useOptions to make it easy.

Here's what it already provides easily:

• Allows you to select from set of options via function

const { options, select, value: selected } = useOptions({ options: ['one', 'two', 'three'] })

console.log(options) // array of options object { isSelect: boolean, value: T }
console.log(selected) // currently selected value
select(options[0])
console.log(selected.value) // 'one'

• It also supports multiple selections for creating checkbox like functionality
• Slickest feature is, it can also accept number as option to generate index-based options (where selection can determined without need for value)
• We can use it to create components like list, tabs, switch, etc.
• Wherever selection is needed from a bunch of options we can use it 💥

Why not in Anu?

• it would be more appropriate for a composable like this to be included in VueUse rather than Anu.
• It needs improvement and enhancements from the community like type fixes and further features like initial value (That's why I pinged @Alfred-Skyblue)

Please let me know your thoughts on this. 😇

Awaiting your response.

[antfu]

Thank you for your proposals. I am still not very sure about it, it feels useful to build a UI library, but when building UI libraries, it might not be flexible to cover all cases. Since we are in slowing down, I feel it's better to have it live in Anu for now. Thank you.

[jd-solanki]

Thanks for your response 😇