search

benpate / hyperscript-widgets

A collectable library of of widgets and behaviors for a more hygienic web experience.
Creative Commons Zero v1.0 Universal
88 stars 6 forks source link

Can headless ui components be translated ? #4

Open juchom opened 2 years ago

juchom commented 2 years ago

Hello,

I went through your components which are impressive and I'm wondering if HeadlessUI components can be translated with hyperscripts : https://headlessui.dev/ ?

Are there some limitations that would not make it feasible ?

And thanks for this repo, great resource for learning !

benpate commented 2 years ago

Hey Julien, That's a great suggestion. If you can build it in javascript, you can build it in hyperscript (and probably easier, too). So yes, we should be able to make versions of all of those widgets.

Checking out Headless UI, it seems like we've already got several of them covered: dialogs, tabs, toggles. So, which of the components in the Headless UI library are most useful to you? I can see about doing the most important ones first.

juchom commented 2 years ago

This one is pretty interesting : https://headlessui.dev/react/combobox

What do you think ?

benpate commented 2 years ago

Yes. A combobox would be awesome. I took a stab at this, trying to use native HTML5 widgets. it went poorly. I'll make another attempt using more hypersrcipt and CSS. BTW, how comfortable are you with hypersrcipt? Do you have any widgets you're using now that you'd like to share? Even if you've only got them started, I'm happy to give them a polish :)

juchom commented 2 years ago

how comfortable are you with hypersrcipt ?

I've started front end development 3 weeks ago, htmx 2 weeks ago and hyperscript this week. Before seeing your repository I didn't even know we could have components like HeadlessUI, I thought this was only possible with big frameworks like React or Vue.

I'm struggling a bit with hyperscript syntax, I love it but I'm missing something, your are using keywords that are not in the documentation (and other people in discord) and I still don't understand how you know they exist.

I'm going to use your components on a basic page to understand how it works.

benpate commented 2 years ago

So, something like this? This is my first pass at doing this, so I'm sure there are things that could be better. Let me know if you have any suggestions about how it should work.

juchom commented 2 years ago

This is pretty impressive !

What would be great is to have available values open when we focus on the combobox and autocomplete when we type something.

benpate commented 2 years ago

Great suggestions. For the focus, I modeled the behavior of Safari select boxes, which show their menus on click, but not on focus. I believe the widget library you shared does the same thing. I suspect other browsers do this too, and that it's to better accommodate people navigating via keyboards. But, if there's a definitive way that these should work, I'm open to suggestions.

Autocomplete is different. It's... harder. I'm sure we could make it work, because there are plenty of autocomplete widgets out there. I'll give it a try the next time I get some time to play with hyperscript :)

lolrenx commented 2 years ago

I'm in the same boat at the moment, I've settled with tom-select which does the autocomplete very well but at the expense of an extra js dependancy. I'm watching this space for the hyperscript version !

benpate commented 2 years ago

This is good to know. It seems like the autocomplete is an important feature that everyone needs. So I'll make it happen.

FWIW, TomSelect is a fantastic piece of code and is far more mature than this (for now). If you need something now, it seems like a solid choice. Eventually, I want this library to be less opinionated and easier to skin into an app.