sherpal/laminarsapui5bindings

Laminar bindings for the SAP ui5 web components library

laminarsapui5bindings's Issues

Finish implementations of missing components

Opening this issue to track the implementation status of all components within the 1.3.0 version.

A component can be in four possible states: missing, pr open, pr merged to master, deployed. I'll keep these statuses up to date. For the ones that are merged to master or deployed, we specify whether all members are complete (including slots and events).

Component	Status	Comment
Avatar	Published	Missing interactive and accessible name properties (PR Open)
Avatar group	PR Open
Badge	Published
Bar	Published
Barcode Scanner Dialog	PR Open
Breadcrumb	Published
Breadcrumbs Item	Published
BusyIndicator	Published
Button	Published
Calendar	PR Open
Card	Published
CardHeader	Published
Carousel	Published
CheckBox	Published
ColourPalette	Published
ColourPaletteItem	Published
ColourPalettePopover	Published
ColourPicker	Published
ComboBox	Published
ComboBoxGroupItem	Published
ComboBoxItem	Published
DatePicker	Published
DateRangePicker	PR Open
DateTimePicker	PR Open
Dialog	Published
DynamicSideContent	PR Open
FileUploader	PR Open
FlexibleColumnLayout	Published	Missing event and accessibility text and roles properties
Icon	Published
IllustratedMessage	Published	Missing slots and size property
Input	Published	Missing some properties
SuggestionItem	Published	Missing some properties
SuggestionGroupItem	PR Open
Label	Published
Link	Published
List	Published	Missing a lot of stuff (PR Open)
MediaGallery	PR Open
Menu	Published
MenuItem	Published
MessageStrip	Published
MultiComboBox	Published	Property noTypeahead will need to be added in 1.4.0
MultiComboBoxItem	Published
MultiComboBoxGroupItem	PR Open
MultiInput	PR Open
NotificationListGroupItem	PR Open
NotificationListItem	PR Open
Page	PR Open
Panel	Published
Popover	Published	Missing a few properties (PR Open)
ProductSwitch	Published
ProductSwitchItem	Published
ProgressIndicator	Published
RadioButton	PR Open
RangeSlider	PR Open
RatingIndicator	Published
ResponsivePopover	PR Open
SegmentedButton	Published
SegmentedButtonItem	Published
Select	Published
Option	Published	It is called SelectOption
ShellBar	Published
ShellBarItem	Published
SideNavigation	Published
SideNavigationItem	Published
SideNavigationSubItem	Published
Slider	PR Open
Split Button	PR Open
Step Input	PR Open
Switch	Published
TabContainer	Published
Tab	Published
Table	Published
TextArea	Published
TimePicker	PR Open
Timeline	Published
TimelineItem	Published
Title	Published
Toast	Published
ToggleButton	PR Open
Tree	Published
TreeItem	Published
Upload Collection	PR Open
ViewSettingsDialog	PR Open
Wizard	PR Open

Make Icon module loading less greedy

Currently the package object eagerly loads all icon modules. This is convenient but bad for bundle size.

This issue wants to fix that.

Hoped design goals:

• only import what is used
• be completely automatic and transparent for the user

Make "search component" field in demo home

Select component

I'm having a little trouble with the select component.

The idea, was to make a dropdown, from a signal of some entities. An "IlsEvent" has a name and an ID.

  def selectFromEvents(events: Signal[List[IlsEvent]], valueSignal: Signal[Option[HistoricalEventSetId]], valueUpdater: Observer[Option[HistoricalEventSetId]]): HtmlElement = {
    SelectTwo(
      _.slots.default <-- events.map{ aList => 
        aList.map{
          item => SelectOption(_.value := item.name, _.additionalText := item.id.value.toString())
        }
      }
    )
  }

I couldn't figure out how to use the slots... so I duplicated "Select" into "SelectTwo" and added the default slots. However, I now can't figure out how to set the text in the select option. The additional text field works however...

I feel like they may be related problems with my understanding!

Facility methods for opening/closing popovers

Currently with have showAtFromEvents and closeFromEvents. Usually they come together (or at least I do it like that) from an EventStream[Option[dom.HTMLElement]] where None means close.

We should implement a method showAtAndCloseFromEvents(events: EventStream[Option[dom.HTMLElement]]) that does exactly that.

And then adapt the examples.

Icons to load for ProgressIndicator

Context: if a ProgressIndicator is used with a ValueState different from the default, there is an icon appended to the ProgressIndicator, but it had to be loaded.

IS: currently we don't make it so that the icon is automatically loaded, so we get errors and warnings in the console when using ProgressIndicator.

SHOULD: when using value state of a ProgressIndicator, automatically add the icons. The icons to load are: "hint", "status-positive", "status-critical" and "status-negative"

TimePicker needs to import localization assets

DatePicker has this import in it which lazily (dynamically) imports all the locales:

  @js.native
  @JSImport("@ui5/webcomponents-localization/dist/Assets.js", JSImport.Default)
  object Localization extends js.Object

It appears that TimePicker also needs this import. I get this error if I try to render TimePicker() in my own project:

This error happens because UI5 is trying to load locales from the internet, while using an outdated version hardcoded in the URL. Why would they do that is another question, but they say we're supposed to avoid this altogether by doing that Assets.js import.

I think the reason TimePicker does not fail in your demo is that you also load DatePicker, which loads this necessary import. If I add DatePicker() in my project, the error goes away.

I tried to add that import to my own Scala.js code, but it does not work. UI5 docs say that it needs to be imported prior to registering the web component, or something like that, I guess the order is wrong? I'm not sure, but if I add that import "@ui5/webcomponents-localization/dist/Assets.js" to my index.js entry point, the problem solves itself too, even without DatePicker().

So, I'm like 90% sure that we need the same Assets.js JSImport in TimePicker as we have in DatePicker.

Pressed dev for ToggleButton Ref

The pressed state of the ToggleButton can only be retrieved from the dom ref. This is especially needed in an onClick event, so that we can do

_.events.onClick.map(_.target.pressed) --> pressedObserver

Better README/docs

The README is a mess. It has too many things in it and it does not follow good readme practices, such as

• start by a motivation
• follow up with the minimum amount of info to have the library working
• list/discuss alternatives
• link to more in-depth documentation.

For this one, it might be interesting to have an external set of eyes since it's probably easier for to spot the difficulties to hightlight in such docs.

onChange in Select does not work with Laminar

I try to use Laminar's Var with the Select component.

But it does not work. I tried different things (I found in similar components - there is none with Select)

As soon I add onChange it stops working - with the last two versions I can select the option as long as the option is after the selected option. If the last is selected - you can't even change it anymore.

val allowedSteps =
  List("my/path/to/dmnConfigs", "another/path", "yet/another/path")
    .map(p => Select.option(value := p, p))
val selectedPathVar: Var[String] = Var("another/path")

      Select(
        value <-- selectedPathVar.signal,          
       allowedSteps,
     //      _.events.onChange.mapToValue --> selectedPathVar,
    // _ => onChange.mapToValue --> (x =>  dom.window.alert(s"onChange_ ${x}")),
      //  onChange.mapToValue.map{x => println(x); x} --> selectedPathVar,
      inContext { thisNode =>
          onChange.map(x => {
            println(s"${thisNode.ref.selectedOption.textContent}")
            thisNode.ref.selectedOption.textContent
          }) --> selectedPathVar
        } , /*
        _.events.onChange.map { x =>
          println(x.detail.selectedOption.textContent);
          x.detail.selectedOption.textContent
        } --> selectedPathVar.writer*/
      )

Do I miss something?

UList does not render...

... unless some other component such as SideNavigation is used.

This is a known issue for version up to 1.8.1, and it will be fixed in 1.9.0. If you are below 1.9.0 and don't want to/can't change, you can import manually this (in your index.html, before importing your scala-js code):

<script type="module">import "@ui5/webcomponents/dist/StandardListItem.js"</script>

A similar issue might appear if you use group header list item, for which you need this import: import @ui5/webcomponents/dist/GroupHeaderListItem.js.

Cannot use Select component with "onChange" property in Scala 2.13

I couldn't do this :

_.events.onChange.map(_.detail.selectedOption.dataset.get("name").get)

inside a Select component. This is how events.onChange was implemented :

 val onChange = new EventProp[dom.Event & HasDetail[HasSelectedOption]]("change")

then the type of onChange in Scala 2 is infered as Nothing, there's no more access to .detail.selectedOption
Is that a bug ? Is there any workaround for this ?
Thank you

Using the custom element manifests to generate this library

With version 1.9.0 of SAP UI5's library, they furnish a programmatic way to get access to the public API of the components.

This should be enough to create an engine capable of generating a huge part of this library by itself.

See here and there. Example for Avatar here.

We should do that, as it will greatly improve standardisation of the "codebase", and reduce maintenance burden.

how to use icons that are not listed in `IconName`

Thanks for this binding. It is quite nice!

While playing around with using icons in SideNavigationItem, I noticed that a number of icons that are available in ui5, such as calendar and locate-me, are not present in IconName. I tried a couple hacks but was unable to find a way to use those icons in my code. Am I missing something? It seems that I'm suck using only what is listed in the IconName config key, is that right?

Should Select support the "onInput" event?

Native select seems to fire "onInput" when an option is selected. The UI5 Select wrapper seems not to.

Happy to try making a PR if I'm on the right track.

Current way to use these wonderful examples?

I'd like to give this a shot - currently, I assume that I'd need to code copy a component into my own project, as this isn't currently published?

That's fine... I just want to check I'm not missing a trick?

Sync up with 1.12/1.13

https://github.com/SAP/ui5-webcomponents/releases

DatePicker - am I using it right?

I'm trying to use the datepicker.

    val strValue = Var[String]("")
    div(
      DatePicker(
        _ => onChange.mapToValue --> strValue,
      ) ,
      child.text <-- strValue.signal.map(x => s"Debug : $x")
)

I was expecting the .mapToValue call, to behave more or less like the input component. In this case, I can't seem to extract the value on change. Is there something obviously wrong with the above?

Slot annotations causing compilation error on Scala 2.13

The annotations on the := operator (@scala.annotation.targetName) do not work with Tasty reader, giving this error:

Unsupported Scala 3 annotation on method :=: @scala.annotation.targetName("fixedSlot");
found in class be.doeraene.webcomponents.ui5.internal.Slot.

Static annotations are not supported by tasty reader. The Slot class is the only one which contains these annotations, is their functionality crucial to the class?

Are there plans for Maven Central publishing

Are there plans to publish this excellent project to maven central?

Or at least setting stable organisation and moduleName properties? Because currently publishing it locally uses module names, which is not super convenient:

/* libraryDependencies += "com.github.sherpal" % "LaminarSAPUI5Bindings" % "1.3.0-dev" */
libraryDependencies += "web-components" %%% "web-components" % "1.3.0-dev"

Themeing / styling ?

This is a "discussion" rather than an issue...

Is there currently any prior art on styling / themeing? I looked at the SAP website... but it looks the theme is currently for their actual customers... which sadly... I am not!

Discussions?

This is really a discussion rather than an issue, I think.

In this example

def networkLinkHeaderSap(inPage: Signal[PageWithId], network: Signal[Option[SingleNetworkExport]]) = {

  val aStringSignal = networkToTitle(network)
  aStringSignal.map(s =>
  Link(
    _ => Title(
      _.level := TitleLevel.H2,
      _ => s
      // Would prefer ?
      //_ <-- aStringSignal
    ),
    _.href <-- inPage.map(p => s"Somewhere/networks/details/${p.id}")
    )
  )        
}

I want to make a title, which is a link. It all works very well... but there's a niggle... which is that commented part. What I think I'd want to write is;

def networkLinkHeaderSap(inPage: Signal[PageWithId], network: Signal[Option[SingleNetworkExport]]) = {
  Link(
    _ => Title(
      _.level := TitleLevel.H2,
       _ <-- networkToTitle(network)
    ),
    _.href <-- inPage.map(p => s"Somewhere/networks/details/${p.id}")
    )
  )        
}

In this case, it's not a big problem, but I could see things getting messy, if one wanted to compose multiple components in such a manner...

I think although am not 100% sure on terminology - what I'm asking is...

Can the Content part of <tag> Contents <tag> be an observable?

Upgrade to sap ui5 1.9.x

1.9.x is there and it brings quite a few nice improvements.

See here.