🚚 Moving Table to compat.Table

So that it's more inlined with the new Table from SAP.
sherpal · Aug 15, 2024 · 577739b · 577739b
1 parent 3898ed9
commit 577739b
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 86 deletions.
diff --git a/VERSION2MIGRATION.md b/VERSION2MIGRATION.md
@@ -12,7 +12,7 @@ Despite that, some changes live outside of these compiler messages, and we highl
 
 ## 🚨 Breaking changes requiring your attention
 
-1. Table has changed, and requires a new npm package import. If you were using the `Table` component, you need to add this extra package import in your `package.json`: `"@ui5/webcomponents-compat": "2.0.1"`.
+1. Table has changed, and requires a new npm package import. If you were using the `Table` component, you need to add this extra package import in your `package.json`: `"@ui5/webcomponents-compat": "2.0.1"`. Also, since there will be a new `Table`, we moved the current Table implementation inside a `compat` object. This will be notified via deprecation notice, unless you skipped 2.0.0 and went directly higher, then you will end up with the new one "by mistake".
 2. The default value of wrapping types has been switch. if you want to have word wrapping, you now need to actively add `_.wrappingType := WrappingType.None`
 3. In ComboBox with groups, grouping is now done via nesting of items inside the groups, rather than a flat structure
 
diff --git a/demo/src/main/scala/demo/CardExample.scala b/demo/src/main/scala/demo/CardExample.scala
@@ -108,30 +108,30 @@ object CardExample extends Example("Card") {
  Card(
  _.slots.header := Card
  .header(_.titleText := "New Purchase Orders", _.subtitleText := "Today", _.additionalText := "3 of 15"),
- Table(
+ compat.Table(
  className := contentPadding,
- _.slots.columns := TableColumn(Label("Sales Order")),
- _.slots.columns := TableColumn(Label("Customer")),
- _.slots.columns := TableColumn(Label("Net Amount")),
- _.slots.columns := TableColumn(
+ _.slots.columns := compat.TableColumn(Label("Sales Order")),
+ _.slots.columns := compat.TableColumn(Label("Customer")),
+ _.slots.columns := compat.TableColumn(Label("Net Amount")),
+ _.slots.columns := compat.TableColumn(
  _.minWidth := 450,
  _.popinText := "Status",
  _.demandPopin := true,
  Label("Status")
  ),
- TableRow(
+ compat.TableRow(
  _.cell(Label("5000010050")),
  _.cell(Label("Entertainment Argentinia")),
  _.cell(Label("6k USD")),
  _.cell(className := statusSuccess, "Approved")
  ),
- TableRow(
+ compat.TableRow(
  _.cell(Label("5000010051")),
  _.cell(Label("Brazil Technologies")),
  _.cell(Label("2k USD")),
  _.cell(className := statusError, "Rejected")
  ),
- TableRow(
+ compat.TableRow(
  _.cell(Label("5000010052")),
  _.cell(Label("Robert Brown Ent.")),
  _.cell(Label("17k USD")),

diff --git a/demo/src/main/scala/demo/TableExample.scala b/demo/src/main/scala/demo/TableExample.scala
@@ -36,19 +36,19 @@ object TableExample extends Example("Table") {
  span("Cards table - resize your browser to make some columns pop-in"),
  Button(_.events.onClick.mapTo(()) --> toggleStickyHeaderBus, "Toggle Sticky Column Header")
  ),
- Table(
+ compat.Table(
  _.stickyColumnHeader <-- stickyHeaderSignal,
- _.slots.columns := Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")),
- _.slots.columns := Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")),
- _.slots.columns := Table.column(
- _.minWidth := 600,
- _.popinText := "Comment",
+ _.slots.columns  := compat.Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")),
+ _.slots.columns  := compat.Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")),
+ _.slots.columns := compat.Table.column(
+ _.minWidth  := 600,
+ _.popinText  := "Comment",
  _.demandPopin := true,
  span(lineHeight := "1.4rem", "Comment")
  ),
- _.slots.columns := Table.column(span(lineHeight := "1.4rem", "Cost")),
+ _.slots.columns := compat.Table.column(span(lineHeight := "1.4rem", "Cost")),
  MTG.cards.map(card =>
- Table.row(
+ compat.Table.row(
  _.cell(card.name),
  _.cell(card.tpe),
  _.cell(card.comment),
@@ -61,19 +61,19 @@ object TableExample extends Example("Table") {
  },
  DemoPanel("Table in SingleSelect-mode")(
  //-- Begin: Table in SingleSelect-mode
- Table(
- _.mode := TableMode.SingleSelect,
- _.slots.columns := Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")),
- _.slots.columns := Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")),
- _.slots.columns := Table.column(
- _.minWidth := 600,
- _.popinText := "Comment",
+ compat.Table(
+ _.mode  := TableMode.SingleSelect,
+ _.slots.columns := compat.Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")),
+ _.slots.columns := compat.Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")),
+ _.slots.columns := compat.Table.column(
+ _.minWidth  := 600,
+ _.popinText  := "Comment",
  _.demandPopin := true,
  span(lineHeight := "1.4rem", "Comment")
  ),
- _.slots.columns := Table.column(span(lineHeight := "1.4rem", "Cost")),
+ _.slots.columns := compat.Table.column(span(lineHeight := "1.4rem", "Cost")),
  MTG.cards.map(card =>
- Table.row(
+ compat.Table.row(
  _.cell(card.name),
  _.cell(card.tpe),
  _.cell(card.comment),
@@ -85,20 +85,20 @@ object TableExample extends Example("Table") {
  ),
  DemoPanel("Table in MultiSelect mode")(
  //-- Begin: Table in MultiSelect mode"
- Table(
+ compat.Table(
  _.events.onSelectionChange.map(_.detail.selectedRows.map(_.dataset.toMap)) --> Observer(println),
- _.mode := TableMode.MultiSelect,
- _.slots.columns := Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")),
- _.slots.columns := Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")),
- _.slots.columns := Table.column(
- _.minWidth := 600,
- _.popinText := "Comment",
+ _.mode  := TableMode.MultiSelect,
+ _.slots.columns := compat.Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")),
+ _.slots.columns := compat.Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")),
+ _.slots.columns := compat.Table.column(
+ _.minWidth  := 600,
+ _.popinText  := "Comment",
  _.demandPopin := true,
  span(lineHeight := "1.4rem", "Comment")
  ),
- _.slots.columns := Table.column(span(lineHeight := "1.4rem", "Cost")),
+ _.slots.columns := compat.Table.column(span(lineHeight := "1.4rem", "Cost")),
  MTG.cards.map(card =>
- Table.row(
+ compat.Table.row(
  dataAttr("card-name") := card.name,
  _.cell(card.name),
  _.cell(card.tpe),
@@ -111,17 +111,17 @@ object TableExample extends Example("Table") {
  ),
  DemoPanel("Table with No Data")(
  //-- Begin: Table with No Data
- Table(
- _.noDataText := "No Data",
- _.slots.columns := Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")),
- _.slots.columns := Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")),
- _.slots.columns := Table.column(
- _.minWidth := 600,
- _.popinText := "Comment",
+ compat.Table(
+ _.noDataText  := "No Data",
+ _.slots.columns := compat.Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")),
+ _.slots.columns := compat.Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")),
+ _.slots.columns := compat.Table.column(
+ _.minWidth  := 600,
+ _.popinText  := "Comment",
  _.demandPopin := true,
  span(lineHeight := "1.4rem", "Comment")
  ),
- _.slots.columns := Table.column(span(lineHeight := "1.4rem", "Cost"))
+ _.slots.columns := compat.Table.column(span(lineHeight := "1.4rem", "Cost"))
  )
  //-- End
  ),
@@ -141,25 +141,25 @@ object TableExample extends Example("Table") {
  .scanLeft(0)(_ + _)
  .map(_ > 0)
 
- Table(
- _.busy <-- busyState,
+ compat.Table(
+ _.busy  <-- busyState,
  _.growing := TableGrowingMode.Button,
  _.growingButtonSubtext <-- numberOfLoadedCards
  .map(_ min totalNumberOfCards)
  .map(n => s"[$n / $totalNumberOfCards]"),
  _.events.onLoadMore.mapTo(()) --> loadMoreBus,
- _.slots.columns := Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")),
- _.slots.columns := Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")),
- _.slots.columns := Table.column(
- _.minWidth := 600,
- _.popinText := "Comment",
+ _.slots.columns := compat.Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")),
+ _.slots.columns := compat.Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")),
+ _.slots.columns := compat.Table.column(
+ _.minWidth  := 600,
+ _.popinText  := "Comment",
  _.demandPopin := true,
  span(lineHeight := "1.4rem", "Comment")
  ),
- _.slots.columns := Table.column(span(lineHeight := "1.4rem", "Cost")),
+ _.slots.columns := compat.Table.column(span(lineHeight := "1.4rem", "Cost")),
  children <-- cardsToDisplay.map(
  _.map(card =>
- Table.row(
+ compat.Table.row(
  dataAttr("card-name") := card.name,
  _.cell(card.name),
  _.cell(card.tpe),
@@ -189,23 +189,23 @@ object TableExample extends Example("Table") {
 
  div(
  overflowY := "scroll",
- height := "400px",
- Table(
- _.busy <-- busyState,
+ height  := "400px",
+ compat.Table(
+ _.busy  <-- busyState,
  _.growing := TableGrowingMode.Scroll,
  _.events.onLoadMore.mapTo(()) --> loadMoreBus,
- _.slots.columns := Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")),
- _.slots.columns := Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")),
- _.slots.columns := Table.column(
- _.minWidth := 600,
- _.popinText := "Comment",
+ _.slots.columns := compat.Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")),
+ _.slots.columns := compat.Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")),
+ _.slots.columns := compat.Table.column(
+ _.minWidth  := 600,
+ _.popinText  := "Comment",
  _.demandPopin := true,
  span(lineHeight := "1.4rem", "Comment")
  ),
- _.slots.columns := Table.column(span(lineHeight := "1.4rem", "Cost")),
+ _.slots.columns := compat.Table.column(span(lineHeight := "1.4rem", "Cost")),
  children <-- cardsToDisplay.map(
  _.map(card =>
- Table.row(
+ compat.Table.row(
  dataAttr("card-name") := card.name,
  _.cell(card.name),
  _.cell(card.tpe),
@@ -220,11 +220,11 @@ object TableExample extends Example("Table") {
  },
  DemoPanel("Table with grouping (SingleSelect)")(
  //-- Begin: Table with grouping (SingleSelect)
- Table(
- _.mode := TableMode.SingleSelect,
- _.slots.columns := Table.column(Label("City")),
- _.slots.columns := Table.column(Label("Population")),
- _.slots.columns := Table.column(Label("Country")),
+ compat.Table(
+ _.mode  := TableMode.SingleSelect,
+ _.slots.columns := compat.Table.column(Label("City")),
+ _.slots.columns := compat.Table.column(Label("Population")),
+ _.slots.columns := compat.Table.column(Label("Country")),
  _.groupRow("Country: Belgium"),
  _.row(_.cell("Brussels"), _.cell("1.2 millions"), _.cell("Belgium")),
  _.row(_.cell("Antwerp"), _.cell("500,000"), _.cell("Belgium")),
@@ -248,18 +248,18 @@ object TableExample extends Example("Table") {
  )
  )
  ),
- Table(
- _.slots.columns := Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")),
- _.slots.columns := Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")),
- _.slots.columns := Table.column(
- _.minWidth := 600,
- _.popinText := "Comment",
+ compat.Table(
+ _.slots.columns := compat.Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")),
+ _.slots.columns := compat.Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")),
+ _.slots.columns := compat.Table.column(
+ _.minWidth  := 600,
+ _.popinText  := "Comment",
  _.demandPopin := true,
  span(lineHeight := "1.4rem", "Comment")
  ),
- _.slots.columns := Table.column(span(lineHeight := "1.4rem", "Cost")),
+ _.slots.columns := compat.Table.column(span(lineHeight := "1.4rem", "Cost")),
  MTG.cards.map(card =>
- Table.row(
+ compat.Table.row(
  _.navigated <-- isCurrentNavigatedCardSignal(card),
  _.cell(card.name),
  _.cell(card.tpe),

diff --git a/...oeraene/webcomponents/ui5/TableCell.scala → ...e/webcomponents/ui5/TableCellCompat.scala b/...oeraene/webcomponents/ui5/TableCell.scala → ...e/webcomponents/ui5/TableCellCompat.scala
@@ -9,7 +9,7 @@ import scala.scalajs.js
 import scala.scalajs.js.annotation.JSImport
 import be.doeraene.webcomponents.WebComponent
 
-object TableCell extends WebComponent {
+object TableCellCompat extends WebComponent {
 
  @js.native
  trait RawElement extends js.Object {}

diff --git a/...raene/webcomponents/ui5/TableColumn.scala → ...webcomponents/ui5/TableColumnCompat.scala b/...raene/webcomponents/ui5/TableColumn.scala → ...webcomponents/ui5/TableColumnCompat.scala
@@ -15,7 +15,7 @@ import com.raquo.laminar.codecs.BooleanAsAttrPresenceCodec
 import be.doeraene.webcomponents.WebComponent
 import be.doeraene.webcomponents.ui5.configkeys.TableColumnPopinDisplay
 
-object TableColumn extends WebComponent {
+object TableColumnCompat extends WebComponent {
 
  @js.native
  trait RawElement extends js.Object {}

diff --git a/...be/doeraene/webcomponents/ui5/Table.scala → ...raene/webcomponents/ui5/TableCompat.scala b/...be/doeraene/webcomponents/ui5/Table.scala → ...raene/webcomponents/ui5/TableCompat.scala
@@ -10,15 +10,13 @@ import com.raquo.laminar.keys.HtmlAttr
 import com.raquo.laminar.nodes.ReactiveHtmlElement
 import org.scalajs.dom
 
-import scala.compiletime.ops.int.<=
-
 import scala.concurrent.duration.FiniteDuration
 import scala.scalajs.js
 import scala.scalajs.js.annotation.JSImport
 import be.doeraene.webcomponents.WebComponent
 import be.doeraene.webcomponents.ui5.configkeys.TableColumnPopinDisplay
 
-object Table extends WebComponent {
+object TableCompat extends WebComponent {
 
  @js.native
  trait RawElement extends js.Object {}
@@ -54,16 +52,16 @@ object Table extends WebComponent {
 
  @js.native
  trait TableSelectionChangeDetail extends js.Object {
- def previouslySelectedRows: js.Array[TableRow.Ref] = js.native
+ def previouslySelectedRows: js.Array[TableRowCompat.Ref] = js.native
 
- def selectedRows: js.Array[TableRow.Ref] = js.native
+ def selectedRows: js.Array[TableRowCompat.Ref] = js.native
  }
 
  val onSelectionChange = new EventProp[dom.Event & HasDetail[TableSelectionChangeDetail]]("selection-change")
  }
 
- def column: TableColumn.type = TableColumn
- def row: TableRow.type = TableRow
+ def column: TableColumnCompat.type = TableColumnCompat
+ def row: TableRowCompat.type = TableRowCompat
 
  def groupRow(mods: Mod[ReactiveHtmlElement[dom.HTMLElement]]*): HtmlElement =
  htmlTag[dom.HTMLElement]("ui5-table-group-row")(mods*)

diff --git a/...doeraene/webcomponents/ui5/TableRow.scala → ...ne/webcomponents/ui5/TableRowCompat.scala b/...doeraene/webcomponents/ui5/TableRow.scala → ...ne/webcomponents/ui5/TableRowCompat.scala
@@ -11,7 +11,7 @@ import be.doeraene.webcomponents.WebComponent
 import com.raquo.laminar.codecs.BooleanAsAttrPresenceCodec
 import com.raquo.laminar.keys.HtmlAttr
 
-object TableRow extends WebComponent {
+object TableRowCompat extends WebComponent {
 
  @js.native
  trait RawElement extends js.Object {}
@@ -30,5 +30,5 @@ object TableRow extends WebComponent {
  lazy val navigated: HtmlAttr[Boolean] = htmlAttr("navigated", BooleanAsAttrPresenceCodec)
 
  //noinspection TypeAnnotation
- val cell = TableCell
+ val cell = TableCellCompat
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/deprecatedstuff.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/deprecatedstuff.scala
@@ -3,7 +3,26 @@ package be.doeraene.webcomponents.ui5
 @deprecated("Badge has been renamed to Tag", since = "2.0.0")
 def Badge = Tag
 
+@deprecated("Table is deprecated while waiting for the Table v2 implementation. Use compat.Table instead", since = "2.0.0")
+def Table = TableCompat
+
+@deprecated("Table is deprecated while waiting for the Table v2 implementation. Use compat.Table instead", since = "2.0.0")
+def TableRow = TableRowCompat
+
+@deprecated("Table is deprecated while waiting for the Table v2 implementation. Use compat.Table instead", since = "2.0.0")
+def TableColumn = TableColumnCompat
+
+@deprecated("Table is deprecated while waiting for the Table v2 implementation. Use compat.Table instead", since = "2.0.0")
+def TableCell = TableCellCompat
+
 @scala.annotation.compileTimeOnly(
  "UListGroupHeader has been replaced by UListGroup, and the structure of your list items now needs to be nested."
 )
 def UListGroupHeader = ???
+
+object compat {
+ def Table = TableCompat
+ def TableRow = TableRowCompat
+ def TableColumn = TableColumnCompat
+ def TableCell = TableCellCompat
+}