search

uosis / laminar-web-components

Web Component definitions for Laminar
MIT License
37 stars 8 forks source link

Attributes not generated #10

Open mathieuleclaire opened 3 years ago

mathieuleclaire commented 3 years ago

Hi, I try to play with the Menu. But some Menu attributes cannot be invoked. For instance anchor. I can find it described in the material.sc but for some reason it is not generated in the material.scala.

And of course, invoking anchor in the Menu definition leads to the error:

value anchor is not a member of object com.github.uosis.laminar.webcomponents.material.Menu
[error]       _.anchor := "menuTrigger",
[error]         ^
[error] one error found
uosis commented 3 years ago

Yep, this is not implemented yet - it gets generated on raw element, but not as reactive prop. See here for the types that do get generated as reactive prop.

It should be an easy fix assuming element can be used as value type of a reactive stream. Perhaps @raquo has an example?

raquo commented 3 years ago

I guess you're looking for a suitable Codec to generate your ReactiveProp instance?

You just need to create object XXXAsIsCodec extends AsIsCodec[XXX] or lazy val XXXAsIsCodec = new AsIsCodec[XXX] {}, with whatever the type of this prop's value has being XXX, even if it's just js.Any.

If this makes it easier for you, you can add an apply[V] method to object AsIsCodec in Scala DOM Types and use that instead.

raquo commented 3 years ago

I'm assuming AsIsCodec is what you want in this case. I don't actually know what kind of values you will be providing to anchor, if it's references to elements, or strings with css selectors, or either of these. Codecs are about mapping scala valuels to native DOM values so unless you want to do any transformations, an instance of AsIsCodec should work for you.

And, no, you can't make a codec mapping a Laminar element to a DOM element. Encoding an existing DOM element into a Laminar element is not possible. So, you'll need to provide element.ref instead of element when using such a prop, if it requires references to elements. But, this won't quite work if this is intended as a method to mount element into the DOM. Currently Laminar assumes that if you want to mount anything into a web component, that you do it via the slot attribute designed for this purpose.