diff --git a/README.md b/README.md index d2c66db..821d1e2 100644 --- a/README.md +++ b/README.md @@ -37,6 +37,10 @@ Using these bindings with an earlier version of UI5 will probably show stuff tha Important: this is only the "Scala part" of the installation. We do *not* manage the dependencies to the npm library itself. See the "How to use" section below. +## Migration to Version 2.x + +Please review our [migration note](./VERSION2MIGRATION.md). + ### Note on the Laminar version This library is built against a certain version of Laminar, but it is set as "provided". That means that you have to depend on Laminar yourself, but (for a large deal) you are not bound to the specific version used here. diff --git a/VERSION2MIGRATION.md b/VERSION2MIGRATION.md new file mode 100644 index 0000000..8468227 --- /dev/null +++ b/VERSION2MIGRATION.md @@ -0,0 +1,18 @@ +# Version 2.0 migration + +This file contains information about the migration from SAP versions 1.x to SAP version 2.0. We tried our best to not disrupt your Scala source files (only deprecation warning will be emitted in a lot of cases), but some things could not be moved automatically due to a consistent change in the behaviour. + +> To actively see the deprecation messages when compiling, you need to add `scalacOptions += "-deprecation"` in your `build.sbt` file. +> +> If you furthermore wants them to be compilation errors, so that you are forced to tackle them, you can add `scalacOptions += "-Xfatal-warnings"` as well + +For most changes actually *requiring* you to make a change, you will have a compile error with a message explaning what you need to do. For comprehensive understanding, though, we refer to [SAP's migration guide](https://sap.github.io/ui5-webcomponents/docs/migration-guides/to-version-2). + +Despite that, some changes live outside of these compiler messages, and we highlight them below. **Please make sure to review them!** + +## 🚨 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"`. +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/package-lock.json b/demo/package-lock.json index 9b1bb91..3a04e26 100644 --- a/demo/package-lock.json +++ b/demo/package-lock.json @@ -8,9 +8,10 @@ "name": "b10", "version": "0.0.0", "dependencies": { - "@ui5/webcomponents": "1.24.7", - "@ui5/webcomponents-fiori": "1.24.7", - "@ui5/webcomponents-icons": "1.24.7", + "@ui5/webcomponents": "2.0.1", + "@ui5/webcomponents-compat": "2.0.1", + "@ui5/webcomponents-fiori": "2.0.1", + "@ui5/webcomponents-icons": "2.0.1", "highlight.js": "^11.6.0" }, "devDependencies": { @@ -199,79 +200,90 @@ "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==" }, "node_modules/@ui5/webcomponents": { - "version": "1.24.7", - "resolved": "https://registry.npmjs.org/@ui5/webcomponents/-/webcomponents-1.24.7.tgz", - "integrity": "sha512-hhI5KuR2bwYMUB9sOxi5FJdD3OQa616XOUqlO3yEmZXllK2AXJoY2fP/hbDTx7Ca8xgXnXH3ywFZ0s0Gc3G06g==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@ui5/webcomponents/-/webcomponents-2.0.1.tgz", + "integrity": "sha512-+TLTH7PUYbThx/47NIEJLrMo/NnaIUIbgTQnWEkPjWH92YGnCQQh/je6Ml4E+vkUVwcEGzb1fTDIB3alHhVctQ==", "dependencies": { - "@ui5/webcomponents-base": "1.24.7", - "@ui5/webcomponents-icons": "1.24.7", - "@ui5/webcomponents-icons-business-suite": "1.24.7", - "@ui5/webcomponents-icons-tnt": "1.24.7", - "@ui5/webcomponents-localization": "1.24.7", - "@ui5/webcomponents-theming": "1.24.7" + "@ui5/webcomponents-base": "2.0.1", + "@ui5/webcomponents-icons": "2.0.1", + "@ui5/webcomponents-icons-business-suite": "2.0.1", + "@ui5/webcomponents-icons-tnt": "2.0.1", + "@ui5/webcomponents-localization": "2.0.1", + "@ui5/webcomponents-theming": "2.0.1" } }, "node_modules/@ui5/webcomponents-base": { - "version": "1.24.7", - "resolved": "https://registry.npmjs.org/@ui5/webcomponents-base/-/webcomponents-base-1.24.7.tgz", - "integrity": "sha512-BJ7sWYjCaNl6G1w8rnYLo2U7eCNGduhD0Gq4wa1jY8g7rDe5Bq1aUCpBFT7GFF5sN02Njw6zx47WZHrQVlhN5Q==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@ui5/webcomponents-base/-/webcomponents-base-2.0.1.tgz", + "integrity": "sha512-jdoUmPbZxMTjyx4MOjCFrxz1OCV/dIBiB/4mas4BkiZLV+jYc/jrPSckdko39KR1m152pIN1n1RxtxWa3S1cPA==", "dependencies": { "@lit-labs/ssr-dom-shim": "^1.1.2", "lit-html": "^2.0.1" } }, + "node_modules/@ui5/webcomponents-compat": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@ui5/webcomponents-compat/-/webcomponents-compat-2.0.1.tgz", + "integrity": "sha512-M1Ckf6fsSr09cyGJr+pv+aO/K6yV/06lBKOcFz7OW6nvqJkA75+6p3i3/riuzQSDTClID80YIQE9SkHbP/0B2g==", + "dependencies": { + "@ui5/webcomponents": "2.0.1", + "@ui5/webcomponents-base": "2.0.1", + "@ui5/webcomponents-icons": "2.0.1", + "@ui5/webcomponents-theming": "2.0.1" + } + }, "node_modules/@ui5/webcomponents-fiori": { - "version": "1.24.7", - "resolved": "https://registry.npmjs.org/@ui5/webcomponents-fiori/-/webcomponents-fiori-1.24.7.tgz", - "integrity": "sha512-FJb1VLb0/gS/WUTltTDGtGgOh3kuOYzwCNeU/UNUblvwoQKtsEvvb+b7jKf4cuSOdHLTdTYdV+1elEx/V+BZag==", - "dependencies": { - "@ui5/webcomponents": "1.24.7", - "@ui5/webcomponents-base": "1.24.7", - "@ui5/webcomponents-icons": "1.24.7", - "@ui5/webcomponents-theming": "1.24.7", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@ui5/webcomponents-fiori/-/webcomponents-fiori-2.0.1.tgz", + "integrity": "sha512-o+txrbWlY7TonPfw/5adUYma5imJBDDP0M4IuJnsfp8CiZEh0gKn+07C2M3PaIwcIaRmYnTfqa4A3mj8zyQqSg==", + "dependencies": { + "@ui5/webcomponents": "2.0.1", + "@ui5/webcomponents-base": "2.0.1", + "@ui5/webcomponents-icons": "2.0.1", + "@ui5/webcomponents-theming": "2.0.1", "@zxing/library": "^0.17.1" } }, "node_modules/@ui5/webcomponents-icons": { - "version": "1.24.7", - "resolved": "https://registry.npmjs.org/@ui5/webcomponents-icons/-/webcomponents-icons-1.24.7.tgz", - "integrity": "sha512-dkAKUZZ3xps4pAhSB60oCuaF8tCsrq2vXopWe+Pnr1+vZlKoUa3itJSLD/e+D1TPIgKNrd9dtcPPmnhCF/DkPA==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@ui5/webcomponents-icons/-/webcomponents-icons-2.0.1.tgz", + "integrity": "sha512-dRSB3722pdQG3+ciKhGlJpU/nlnAQ63SgJ2PKXlIXvcbgc8BMRprasfz7Y7l9ZRsAMZZ2TVO3PUhLNMkZS6vlg==", "dependencies": { - "@ui5/webcomponents-base": "1.24.7" + "@ui5/webcomponents-base": "2.0.1" } }, "node_modules/@ui5/webcomponents-icons-business-suite": { - "version": "1.24.7", - "resolved": "https://registry.npmjs.org/@ui5/webcomponents-icons-business-suite/-/webcomponents-icons-business-suite-1.24.7.tgz", - "integrity": "sha512-02Tdhvh9TGRQ3YrPjFP00XfcCuAxxi7qBC7zSlHKlUdn76vjTOQD7G7j8lqMknIjVbwBrsl+QS48Cl+drgkcLQ==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@ui5/webcomponents-icons-business-suite/-/webcomponents-icons-business-suite-2.0.1.tgz", + "integrity": "sha512-OQsLFFMlJWuj7ENFg7ZT1fiEpEqSWPnQ7I/EIIqPyBWjpgvDb84vzOv+c2Hou2DpNB/dGH0gAGmkWJnDHealYw==", "dependencies": { - "@ui5/webcomponents-base": "1.24.7" + "@ui5/webcomponents-base": "2.0.1" } }, "node_modules/@ui5/webcomponents-icons-tnt": { - "version": "1.24.7", - "resolved": "https://registry.npmjs.org/@ui5/webcomponents-icons-tnt/-/webcomponents-icons-tnt-1.24.7.tgz", - "integrity": "sha512-Fjg4iCje28myoSlqD+lzQTMVwI8oHOBbU2Y/jPYJXb/AJrhh9uEyFc/TtBBAVr1yRVlESb4CiUXuKC5TFcbRyA==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@ui5/webcomponents-icons-tnt/-/webcomponents-icons-tnt-2.0.1.tgz", + "integrity": "sha512-/4QwEYZ0UfJRrRhG7o4kAjoFZ2Wy8bEThq+ZTV1afqJWCiPDcrKZKhPqIEOCHIE1y2TMjmo/w7UIZSIBGF81oQ==", "dependencies": { - "@ui5/webcomponents-base": "1.24.7" + "@ui5/webcomponents-base": "2.0.1" } }, "node_modules/@ui5/webcomponents-localization": { - "version": "1.24.7", - "resolved": "https://registry.npmjs.org/@ui5/webcomponents-localization/-/webcomponents-localization-1.24.7.tgz", - "integrity": "sha512-fiKjxKdWo5ErRuRSyVHMcMpwrYMvnFldSSW4XENiX86UTtokQTWbtOeqfCDqHA8Io/Xayx2OIs4kOi+cujF3NA==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@ui5/webcomponents-localization/-/webcomponents-localization-2.0.1.tgz", + "integrity": "sha512-GHtpC9Ayo4Nha2nRgUfc6dnz8qAmj73ldCfWBh2arcDQ6VY7ZdI5d6mSTPQeNn9/5ZzvtDccJScN+IMO1z169g==", "dependencies": { "@types/openui5": "^1.113.0", - "@ui5/webcomponents-base": "1.24.7" + "@ui5/webcomponents-base": "2.0.1" } }, "node_modules/@ui5/webcomponents-theming": { - "version": "1.24.7", - "resolved": "https://registry.npmjs.org/@ui5/webcomponents-theming/-/webcomponents-theming-1.24.7.tgz", - "integrity": "sha512-rhHS2e739DGsGT5bgVprZgPIl10kNhDrUoYRuDaLVs1iQEcxQFRRElauQuNi2+VUzDyNkulaWi3Xek/es5aHdw==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@ui5/webcomponents-theming/-/webcomponents-theming-2.0.1.tgz", + "integrity": "sha512-HdofJMU8xPDWReq3zjj6kW0HM3rvXfDm5lhIi3cFkqxZJN0nxY4nVCdIIrwzROxYNupeMmYvnj776B3GsAoAwQ==", "dependencies": { "@sap-theming/theming-base-content": "11.12.0", - "@ui5/webcomponents-base": "1.24.7" + "@ui5/webcomponents-base": "2.0.1" } }, "node_modules/@zxing/library": { diff --git a/demo/package.json b/demo/package.json index 62495b1..3917294 100644 --- a/demo/package.json +++ b/demo/package.json @@ -12,9 +12,10 @@ "vite-plugin-html": "3.2.0" }, "dependencies": { - "@ui5/webcomponents": "1.24.7", - "@ui5/webcomponents-fiori": "1.24.7", - "@ui5/webcomponents-icons": "1.24.7", + "@ui5/webcomponents": "2.0.1", + "@ui5/webcomponents-fiori": "2.0.1", + "@ui5/webcomponents-icons": "2.0.1", + "@ui5/webcomponents-compat": "2.0.1", "highlight.js": "^11.6.0" } } diff --git a/demo/src/main/scala/demo/BarcodeScannerDialogExample.scala b/demo/src/main/scala/demo/BarcodeScannerDialogExample.scala index 7f376e6..41e00ae 100644 --- a/demo/src/main/scala/demo/BarcodeScannerDialogExample.scala +++ b/demo/src/main/scala/demo/BarcodeScannerDialogExample.scala @@ -27,14 +27,13 @@ object BarcodeScannerDialogExample extends Example("BarcodeScannerDialog") { div( BarcodeScannerDialog( - _.showOnEvents(openScannerBus.events), - _.closeOnEvents(barcodeScanEvents), + _.open <-- EventStream.merge(openScannerBus.events.mapTo(true), barcodeScanEvents.mapTo(false)), _.events.onScanSuccess.map(_.detail) --> barcodeScanSuccessBus.writer, _.events.onScanError.map(_.detail) --> barcodeScanFailedBus.writer ), Title.h3("Click on the button below and show a QR code to the camera:"), Button( - _.icon := IconName.camera, + _.icon := IconName.camera, _.tooltip := "Start Camera", "Scan", _.events.onClick.mapTo(()) --> openScannerBus.writer diff --git a/demo/src/main/scala/demo/BreadcrumbsExample.scala b/demo/src/main/scala/demo/BreadcrumbsExample.scala index 8cc8b42..1b3b5d1 100644 --- a/demo/src/main/scala/demo/BreadcrumbsExample.scala +++ b/demo/src/main/scala/demo/BreadcrumbsExample.scala @@ -13,7 +13,7 @@ object BreadcrumbsExample extends Example("Breadcrumbs") { //-- Begin: Standard Breadcrumbs Breadcrumbs( _.Item( - _.href := "https://github.com/sherpal/LaminarSAPUI5Bindings", + _.href := "https://github.com/sherpal/LaminarSAPUI5Bindings", _.target := LinkTarget._blank, "Root page" ), @@ -28,7 +28,7 @@ object BreadcrumbsExample extends Example("Breadcrumbs") { Breadcrumbs( _.design := BreadcrumbsDesign.NoCurrentPage, _.Item( - _.href := "https://github.com/sherpal/LaminarSAPUI5Bindings", + _.href := "https://github.com/sherpal/LaminarSAPUI5Bindings", _.target := LinkTarget._blank, "Root page" ), @@ -41,9 +41,9 @@ object BreadcrumbsExample extends Example("Breadcrumbs") { div( BreadcrumbsSeparatorStyle.allValues.map(separatorStyle => Breadcrumbs( - _.separatorStyle := separatorStyle, + _.separators := separatorStyle, _.Item( - _.href := "https://github.com/sherpal/LaminarSAPUI5Bindings", + _.href := "https://github.com/sherpal/LaminarSAPUI5Bindings", _.target := LinkTarget._blank, "Root page" ), diff --git a/demo/src/main/scala/demo/CalendarExample.scala b/demo/src/main/scala/demo/CalendarExample.scala index 6c7cef2..5a84efc 100644 --- a/demo/src/main/scala/demo/CalendarExample.scala +++ b/demo/src/main/scala/demo/CalendarExample.scala @@ -16,10 +16,10 @@ object CalendarExample extends Example("Calendar") { div( Label(child.text <-- maybeSelectedDateVar.signal.map { case None => "No selected date yet." - case Some(info) => s"Selected dates: ${info.values.zip(info.dates).mkString(", ")}." + case Some(info) => s"Selected dates: ${info.selectedValues.zip(info.selectedDates).mkString(", ")}." }), br(), - Calendar(_.events.onSelectedDatesChange.map(_.detail) --> maybeSelectedDateVar.writer.contramapSome) + Calendar(_.events.onSelectionChange.map(_.detail) --> maybeSelectedDateVar.writer.contramapSome) ) //-- End }, diff --git a/demo/src/main/scala/demo/CardExample.scala b/demo/src/main/scala/demo/CardExample.scala index 83df2cd..003dc5e 100644 --- a/demo/src/main/scala/demo/CardExample.scala +++ b/demo/src/main/scala/demo/CardExample.scala @@ -41,23 +41,27 @@ object CardExample extends Example("Card") { Card( className := medium, _.slots.header := Card.header( - _.titleText := "Magic Mana Symbols", - _.subtitleText := "All of them", - _.status := "3 of 6", - _.slots.avatar := Icon(_.name := IconName.group), - _.slots.action := Button(_.design := ButtonDesign.Transparent, "View All") + _.titleText := "Magic Mana Symbols", + _.subtitleText := "All of them", + _.additionalText := "3 of 6", + _.slots.avatar := Icon(_.name := IconName.group), + _.slots.action := Button(_.design := ButtonDesign.Transparent, "View All") ), div( className := cardContentClassName, UList( _.separators := ListSeparator.None, - width := "100%", + width := "100%", marginBottom := "0.75rem", MTG.manaSymbolsNames .zip(MTG.manaSymbolsShortNames) .take(3) .map((name, shortName) => - UList.item(_.image := MTG.manaSymbolsRefs(shortName), _.description := name, name) + UList.item( + _.slots.image := Avatar(img(src := MTG.manaSymbolsRefs(shortName))), + _.description := name, + name + ) ) ) ) @@ -65,23 +69,27 @@ object CardExample extends Example("Card") { Card( className := medium, _.slots.header := Card.header( - _.titleText := "This header is interactive", - _.interactive := true, - _.subtitleText := "Click, press Enter or Space", - _.status := "3 of 6", - _.slots.avatar := Icon(_.name := IconName.group) + _.titleText := "This header is interactive", + _.interactive := true, + _.subtitleText := "Click, press Enter or Space", + _.additionalText := "3 of 6", + _.slots.avatar := Icon(_.name := IconName.group) ), div( className := cardContentClassName, UList( _.separators := ListSeparator.None, - width := "100%", + width := "100%", marginBottom := "0.75rem", MTG.manaSymbolsNames .zip(MTG.manaSymbolsShortNames) .drop(3) .map((name, shortName) => - UList.item(_.image := MTG.manaSymbolsRefs(shortName), _.description := name, name) + UList.item( + _.slots.image := Avatar(img(src := MTG.manaSymbolsRefs(shortName))), + _.description := name, + name + ) ) ) ) @@ -99,15 +107,15 @@ object CardExample extends Example("Card") { |""".stripMargin), Card( _.slots.header := Card - .header(_.titleText := "New Purchase Orders", _.subtitleText := "Today", _.status := "3 of 15"), + .header(_.titleText := "New Purchase Orders", _.subtitleText := "Today", _.additionalText := "3 of 15"), Table( - className := contentPadding, + className := contentPadding, _.slots.columns := TableColumn(Label("Sales Order")), _.slots.columns := TableColumn(Label("Customer")), _.slots.columns := TableColumn(Label("Net Amount")), _.slots.columns := TableColumn( - _.minWidth := 450, - _.popinText := "Status", + _.minWidth := 450, + _.popinText := "Status", _.demandPopin := true, Label("Status") ), diff --git a/demo/src/main/scala/demo/CarouselExample.scala b/demo/src/main/scala/demo/CarouselExample.scala index 9038ff6..2a95832 100644 --- a/demo/src/main/scala/demo/CarouselExample.scala +++ b/demo/src/main/scala/demo/CarouselExample.scala @@ -8,14 +8,10 @@ import demo.helpers.{DemoPanel, Example, FetchDemoPanelFromGithub, MTG} object CarouselExample extends Example("Carousel") { //-- Begin Common - private def threeMagicWallpapers = List( - img( - src := "https://media.magic.wizards.com/images/wallpaper/senseis-divining-top-2x2-background-1280x960.jpg" - ), - img(src := "https://media.magic.wizards.com/images/wallpaper/mana-vault-2x2-background-1280x960.jpg"), - img( - src := "https://media.magic.wizards.com/images/wallpaper/sparas_headquarters_kieran_yanner_1280x960_poozxbqpcw.jpg" - ) + private def threeMagicCards = List( + img(src := MTG.cardImages("Black Lotus")), + img(src := MTG.cardImages("Ancestral Recall")), + img(src := MTG.cardImages("Time Walk")) ) //-- End Common @@ -29,15 +25,17 @@ object CarouselExample extends Example("Carousel") { |""".stripMargin), DemoPanel("Carousel With Single Item per Page")( //-- Begin: Carousel With Single Item per Page - Carousel(threeMagicWallpapers*) + Carousel(threeMagicCards*) //-- End ), DemoPanel("Carousel with Multiple items per Page")( //-- Begin: Carousel with Multiple items per Page Carousel( - _.itemsPerPageS := 1, - _.itemsPerPageM := 2, - _.itemsPerPageL := 2, + _.itemsPerPage := Carousel.ItemsPerPage(1, 2, 2, 2), + // Before Version 2.0.0: + // _.itemsPerPageS := 1, + // _.itemsPerPageM := 2, + // _.itemsPerPageL := 2, MTG.manaSymbolsShortNames.map(name => img(src := MTG.manaSymbolsRefs(name), alt := name)) ) //-- End @@ -45,7 +43,7 @@ object CarouselExample extends Example("Carousel") { DemoPanel("Carousel With Arrow Placement and Cyclic")( //-- Begin: Carousel With Arrow Placement and Cyclic Carousel( - threeMagicWallpapers ++ List(_.arrowsPlacement := CarouselArrowsPlacement.Navigation, _.cyclic := true)* + threeMagicCards ++ List(_.arrowsPlacement := CarouselArrowsPlacement.Navigation, _.cyclic := true)* ) //-- End ), diff --git a/demo/src/main/scala/demo/CheckBoxExample.scala b/demo/src/main/scala/demo/CheckBoxExample.scala index 9715e3a..98907d4 100644 --- a/demo/src/main/scala/demo/CheckBoxExample.scala +++ b/demo/src/main/scala/demo/CheckBoxExample.scala @@ -14,10 +14,10 @@ object CheckBoxExample extends Example("CheckBox") { DemoPanel("Basic CheckBox")( //-- Begin: Basic CheckBox div( - CheckBox(_.text := "Chocolate", _.checked := true), + CheckBox(_.text := "Chocolate", _.checked := true), CheckBox(_.text := "Strawberry", _.checked := true), - CheckBox(_.text := "Waffles", _.checked := true, _.valueState := ValueState.Error), - CheckBox(_.text := "Cake", _.checked := true, _.valueState := ValueState.Warning) + CheckBox(_.text := "Waffles", _.checked := true, _.valueState := ValueState.Negative), + CheckBox(_.text := "Cake", _.checked := true, _.valueState := ValueState.Critical) ) //-- End ), @@ -34,12 +34,12 @@ object CheckBoxExample extends Example("CheckBox") { " indeterminate" else "") } yield CheckBox( - _.text := text, - _.valueState := valueState, + _.text := text, + _.valueState := valueState, _.indeterminate := isIndeterminate, - _.readonly := isReadonly, - _.disabled := isDisabled, - _.checked := true + _.readonly := isReadonly, + _.disabled := isDisabled, + _.checked := true ) ) //-- End @@ -48,14 +48,14 @@ object CheckBoxExample extends Example("CheckBox") { //-- Begin: CheckBox with Text Wrapping div( CheckBox( - _.text := "ui5-checkbox with 'wrapping-type=Normal' set and some long text.", + _.text := "ui5-checkbox with 'wrapping-type=Normal' set and some long text.", _.wrappingType := WrappingType.Normal, - width := "200px" + width := "200px" ), CheckBox( - _.text := "Another ui5-checkbox with very long text here", + _.text := "Another ui5-checkbox with very long text here", _.wrappingType := WrappingType.Normal, - width := "200px" + width := "200px" ) ) //-- End @@ -74,7 +74,7 @@ object CheckBoxExample extends Example("CheckBox") { div( CheckBox( - _.text := "Select / deselect all", + _.text := "Select / deselect all", _.indeterminate <-- numberOfCheckedSignal.map(count => count != 0 && count != 3), _.checked <-- numberOfCheckedSignal.map(_ > 0), // mapToChecked is possible but a bit hacky @@ -83,7 +83,7 @@ object CheckBoxExample extends Example("CheckBox") { hr(), texts.map(text => CheckBox( - _.text := text, + _.text := text, _.checked <-- textsStatusesVar.signal.map(_(text)), // map(_.target.checked) is completely typesafe _.events.onChange.map(_.target.checked).map(text -> _) --> textsStatusesUpdater diff --git a/demo/src/main/scala/demo/ColourPalettePopoverExample.scala b/demo/src/main/scala/demo/ColourPalettePopoverExample.scala index b3c634a..353792a 100644 --- a/demo/src/main/scala/demo/ColourPalettePopoverExample.scala +++ b/demo/src/main/scala/demo/ColourPalettePopoverExample.scala @@ -22,11 +22,12 @@ object ColourPalettePopoverExample extends Example("ColourPalettePopover") { child.text <-- chosenColourBus.events.map(colour => s"Selected colour: $colour").startWith("No selection yet") ), Button( + idAttr := "Color-Palette-Popover-with-recent-colors,-default-color-and-more-colors-features-Button", "Open ColourPalettePopover", _.events.onClick.mapToEvent.map(_.target) --> openPopoverBus.writer ), ColourPalettePopover( - _.showAtFromEvents(openPopoverBus.events), + _.showAtOpenerIdFromEvents(openPopoverBus.events.map(_.id)), ColourPaletteExample.someColourPaletteItems, _.showRecentColours := true, _.showMoreColours := true, @@ -40,14 +41,17 @@ object ColourPalettePopoverExample extends Example("ColourPalettePopover") { }, DemoPanel("Color Palette Popover without any additional features") { //-- Begin: Color Palette Popover without any additional features - val openPopoverBus: EventBus[HTMLElement] = new EventBus + val openPopoverBus: EventBus[Unit] = new EventBus + val openerId = "Color-Palette-Popover-without-any-additional-features-Button" div( Button( "Open ColourPalettePopover", - _.events.onClick.mapToEvent.map(_.target) --> openPopoverBus.writer + idAttr := openerId, + _.events.onClick.mapTo(()) --> openPopoverBus.writer ), ColourPalettePopover( - _.showAtFromEvents(openPopoverBus.events), + _.openerId := openerId, + _.open <-- openPopoverBus.events.mapTo(true), ColourPaletteExample.someColourPaletteItems, _.defaultColour := Colour.green ) diff --git a/demo/src/main/scala/demo/ColourPickerExample.scala b/demo/src/main/scala/demo/ColourPickerExample.scala index f3c8a84..d9bfa74 100644 --- a/demo/src/main/scala/demo/ColourPickerExample.scala +++ b/demo/src/main/scala/demo/ColourPickerExample.scala @@ -15,7 +15,7 @@ object ColourPickerExample extends Example("ColourPicker") { //-- Begin: Pick Colour val maybeChosenColourVar: Var[Option[Colour]] = Var(Option.empty) div( - ColourPicker(_.events.onChange.map(_.target.colour).map(Some(_)) --> maybeChosenColourVar.writer), + ColourPicker(_.events.onChange.map(_.target.value).map(Some(_)) --> maybeChosenColourVar.writer), div( child.text <-- maybeChosenColourVar.signal.map { case Some(colour) => s"You have chosen colour ${colour.rgba}." diff --git a/demo/src/main/scala/demo/ComboBoxExample.scala b/demo/src/main/scala/demo/ComboBoxExample.scala index 9db6007..1735389 100644 --- a/demo/src/main/scala/demo/ComboBoxExample.scala +++ b/demo/src/main/scala/demo/ComboBoxExample.scala @@ -88,9 +88,10 @@ object ComboBoxExample extends Example("ComboBox") { someOtherCountries .groupBy(_.head) .toList - .flatMap((firstLetter, countries) => - ComboBox.group(_.text := firstLetter.toString()) +: countries.sorted.map(country => - ComboBox.item(_.text := country) + .map((firstLetter, countries) => + ComboBox.group( + _.headerText := firstLetter.toString(), + countries.sorted.map(country => ComboBox.item(_.text := country)) ) ) ) diff --git a/demo/src/main/scala/demo/DatePickerExample.scala b/demo/src/main/scala/demo/DatePickerExample.scala index 13c0285..383882d 100644 --- a/demo/src/main/scala/demo/DatePickerExample.scala +++ b/demo/src/main/scala/demo/DatePickerExample.scala @@ -12,9 +12,9 @@ object DatePickerExample extends Example("DatePicker") { demoPanelInfoMap: FetchDemoPanelFromGithub.CompleteDemoPanelInfo ): HtmlElement = div( MessageStrip( - _.design := MessageStripDesign.Warning, - "Note: you must provide an implementation for java.time classes in order to use the DatePicker. " + - "For example using the scala-java-time library." + _.design := MessageStripDesign.Critical, + "Note: you must provide an implementation for java.time classes in order to use the DatePicker. " + + "For example using the scala-java-time library." ), DemoPanel("Basic DatePicker")( //-- Begin: Basic DatePicker @@ -25,9 +25,9 @@ object DatePickerExample extends Example("DatePicker") { //-- Begin: DatePicker with Placeholder, Tooltip, Events, ValueState and valueStateMessage val validityStateBus: EventBus[Boolean] = new EventBus DatePicker( - _.placeholder := "Delivery date...", + _.placeholder := "Delivery date...", _.slots.valueStateMessage := div("The value is not valid. Please provide a valid value."), - _.valueState <-- validityStateBus.events.map(if _ then ValueState.None else ValueState.Error), + _.valueState <-- validityStateBus.events.map(if _ then ValueState.None else ValueState.Negative), _.events.onChange.map(_.detail.valid) --> validityStateBus.writer ) //-- End @@ -36,8 +36,8 @@ object DatePickerExample extends Example("DatePicker") { //-- Begin: DatePicker with Minimum and Maximum Date - 1/1/2020 - 4/5/2020 format-pattern='yyyy-MM-dd' DatePicker( _.formatPattern := "yyyy-MM-dd", - _.minDateStr := "2020-01-01", - _.maxDateStr := "2020-05-04" + _.minDateStr := "2020-01-01", + _.maxDateStr := "2020-05-04" ) //-- End ), diff --git a/demo/src/main/scala/demo/DialogExample.scala b/demo/src/main/scala/demo/DialogExample.scala index 903b4cb..be2bc0e 100644 --- a/demo/src/main/scala/demo/DialogExample.scala +++ b/demo/src/main/scala/demo/DialogExample.scala @@ -20,13 +20,6 @@ object DialogExample extends Example("Dialog") { "Open Dialog", _.events.onClick.mapTo(true) --> openDialogBus.writer ), - div( - MessageStrip( - _.design := MessageStripDesign.Information, - "The opening of this dialog works using an `EventBus`. " + - "Clicking on the 'Open Dialog' button writes to the bus, and the Dialog listens to it." - ) - ), Dialog( _.showFromEvents(openDialogBus.events.filter(identity).mapTo(())), _.closeFromEvents(openDialogBus.events.map(!_).filter(identity).mapTo(())), @@ -35,15 +28,15 @@ object DialogExample extends Example("Dialog") { className := loginFormClass, div( Label(_.forId := "username", _.required := true, "Username:"), - Input(_.id := "username") + Input(_.id := "username") ), div( Label(_.forId := "password", _.required := true, "Password:"), - Input(_.id := "password", _.tpe := InputType.Password, _.valueState := ValueState.Error) + Input(_.id := "password", _.tpe := InputType.Password, _.valueState := ValueState.Negative) ), div( Label(_.forId := "email", _.required := true, "Email:"), - Input(_.id := "email", _.tpe := InputType.Email) + Input(_.id := "email", _.tpe := InputType.Email) ) ), _.slots.footer := div( @@ -60,21 +53,14 @@ object DialogExample extends Example("Dialog") { }, DemoPanel("Draggable and Resizable Dialog") { //-- Begin: Draggable and Resizable Dialog - val dialogId = "the-dialog-id" + val openDialogBus: EventBus[Boolean] = new EventBus div( Button( "Open Draggable/Resizable dialog", - _.events.onClick.mapTo(Dialog.getDialogById(dialogId)) --> Observer[Option[Dialog.Ref]] { - case Some(dialog) => dialog.show() - case None => throw new IllegalStateException(s"The Dialog with id $dialogId does not exist.") - } - ), - MessageStrip( - _.design := MessageStripDesign.Information, - "The opening of this dialog works by finding the dialog by id (with `Dialog.getDialogById`)." + _.events.onClick.mapTo(true) --> openDialogBus.writer ), Dialog( - _.id := dialogId, + _.open <-- openDialogBus.events, _.headerText := "Draggable/Resizable dialog", sectionTag( "Resize this dialog by dragging it by its resize handle.", @@ -90,10 +76,7 @@ object DialogExample extends Example("Dialog") { Button( _.design := ButtonDesign.Emphasized, "Close", - _.events.onClick.mapTo(Dialog.getDialogById(dialogId)) --> Observer[Option[Dialog.Ref]] { - case Some(dialog) => dialog.close() - case None => throw new IllegalStateException(s"Dialog with id $dialogId does not exist.") - } + _.events.onClick.mapTo(false) --> openDialogBus.writer ) ), _.draggable := true, diff --git a/demo/src/main/scala/demo/DynamicSideContentExample.scala b/demo/src/main/scala/demo/DynamicSideContentExample.scala index e346b59..d02bd50 100644 --- a/demo/src/main/scala/demo/DynamicSideContentExample.scala +++ b/demo/src/main/scala/demo/DynamicSideContentExample.scala @@ -98,16 +98,15 @@ object DynamicSideContentExample extends Example("DynamicSideContent") { val toggleContentsBus: EventBus[Unit] = new EventBus Page( - height := "500px", - maxWidth := "360px", - _.floatingFooter := true, + height := "500px", + maxWidth := "360px", _.hideFooter := false, //maxWidth := "360px", - DynamicSideContent( - inContext(el => toggleContentsBus.events --> Observer[Any](_ => el.ref.toggleContents())), - div(h1("Main Content"), p(mainContent)), - _.slots.sideContent := div(h1("Side Content"), p(sideContent)) - ), + DynamicSideContent( + inContext(el => toggleContentsBus.events --> Observer[Any](_ => el.ref.toggleContents())), + div(h1("Main Content"), p(mainContent)), + _.slots.sideContent := div(h1("Side Content"), p(sideContent)) + ), _.slots.footer := Bar( _.design := BarDesign.FloatingFooter, _.slots.endContent := Button( diff --git a/demo/src/main/scala/demo/EntryPoint.scala b/demo/src/main/scala/demo/EntryPoint.scala index 124bff1..a601b3e 100644 --- a/demo/src/main/scala/demo/EntryPoint.scala +++ b/demo/src/main/scala/demo/EntryPoint.scala @@ -7,7 +7,7 @@ import demo.helpers.Example import org.scalajs.dom import org.scalajs.dom.{window, URL} -import demo.BadgeExample +import demo.TagExample import demo.helpers.ThemeSelector object EntryPoint { def main(args: Array[String]): Unit = { @@ -15,7 +15,7 @@ object EntryPoint { val componentsDemo: List[Example] = List( AvatarExample, AvatarGroupExample, - BadgeExample, + TagExample, BarExample, BarcodeScannerDialogExample, BreadcrumbsExample, diff --git a/demo/src/main/scala/demo/FileUploaderExample.scala b/demo/src/main/scala/demo/FileUploaderExample.scala index b5b4e0f..f7188d1 100644 --- a/demo/src/main/scala/demo/FileUploaderExample.scala +++ b/demo/src/main/scala/demo/FileUploaderExample.scala @@ -19,7 +19,7 @@ object FileUploaderExample extends Example("FileUploader") { div( div( FileUploader( - _.accept := List("image/*"), + _.accept := List("image/*"), _.multiple := true, _.events.onChange.map(_.target.files) --> selectedImagesVar.writer.contramapSome, Button("Upload Images", _.icon := IconName.upload) @@ -37,9 +37,9 @@ object FileUploaderExample extends Example("FileUploader") { case files => files.map { file => img( - widthAttr := 100, + widthAttr := 100, heightAttr := 100, - src := dom.URL.createObjectURL(file), + src := dom.URL.createObjectURL(file), inContext(el => onLoad --> Observer[Any](_ => dom.URL.revokeObjectURL(el.ref.src))) ) } @@ -57,7 +57,7 @@ object FileUploaderExample extends Example("FileUploader") { //-- Begin: Custom File Uploaders div( FileUploader(_.hideInput := true, Avatar(_.icon := IconName.upload)), - FileUploader(_.hideInput := true, Badge("Upload File")) + FileUploader(_.hideInput := true, Tag("Upload File")) ) //-- End }, @@ -65,7 +65,7 @@ object FileUploaderExample extends Example("FileUploader") { //-- Begin: Button With Icon File Uploader div( FileUploader(Button(_.icon := IconName.upload, "Upload")), - FileUploader(Button(_.icon := IconName.upload, _.iconEnd := true, "Upload")), + FileUploader(Button(_.endIcon := IconName.upload, "Upload")), FileUploader(Button(_.icon := IconName.upload, _.iconOnly := true)) ) //-- End diff --git a/demo/src/main/scala/demo/FlexibleColumnLayoutExample.scala b/demo/src/main/scala/demo/FlexibleColumnLayoutExample.scala index ed650f0..17699a4 100644 --- a/demo/src/main/scala/demo/FlexibleColumnLayoutExample.scala +++ b/demo/src/main/scala/demo/FlexibleColumnLayoutExample.scala @@ -4,6 +4,9 @@ import be.doeraene.webcomponents.ui5.* import be.doeraene.webcomponents.ui5.configkeys.* import com.raquo.laminar.api.L.* import demo.helpers.{DemoPanel, Example, FetchDemoPanelFromGithub, MTG} +import org.scalajs.dom + +import scala.scalajs.js object FlexibleColumnLayoutExample extends Example("FlexibleColumnLayout") { @@ -22,10 +25,10 @@ object FlexibleColumnLayoutExample extends Example("FlexibleColumnLayout") { def startColumnListItem(card: Card): HtmlElement = UList.item( card.name, - _.description := card.tpe, - _.additionalText := s"Cost: ${card.cost}", - _.iconEnd := true, - _.icon := IconName.`slim-arrow-right`, + _.description := card.tpe, + _.additionalText := s"Cost: ${card.cost}", + _.iconEnd := true, + _.icon := IconName.`slim-arrow-right`, dataAttr("card-name") := card.name ) @@ -49,10 +52,11 @@ object FlexibleColumnLayoutExample extends Example("FlexibleColumnLayout") { |""".stripMargin), FlexibleColumnLayout( _.layout <-- layoutBus.events.startWith(FCLLayout.OneColumn), + _.events.onLayoutChanged.map(_.detail) --> Observer[js.Any](obj => dom.console.log(obj)), _.slots.startColumn := div( ShellBar(_.primaryTitle := "Magic"), UList( - height := "500px", + height := "500px", _.headerText := "Power Nine", cards.filter(_.comment == "Power Nine").map(startColumnListItem), _.events.onItemClick @@ -67,22 +71,22 @@ object FlexibleColumnLayoutExample extends Example("FlexibleColumnLayout") { _.slots.midColumn <-- maybeSelectedCardVar.signal.changes.collect { case Some(card) => card }.map { card => div( div( - display := "flex", + display := "flex", alignItems := "center", Button( _.icon := IconName.`slim-arrow-left`, _.events.onClick.mapTo(Option.empty[Card]) --> maybeSelectedCardVar.writer, marginRight := "1em", - _.design := ButtonDesign.Transparent + _.design := ButtonDesign.Transparent ), h1(card.name) ), img(src := MTG.cardImages(card.name)) ) }, - maybeSelectedCardVar.signal.changes.map(maybeCard => - if maybeCard.isDefined then FCLLayout.TwoColumnsMidExpanded else FCLLayout.OneColumn - ) --> layoutBus.writer + maybeSelectedCardVar.signal.changes.map(maybeCard => + if maybeCard.isDefined then FCLLayout.TwoColumnsMidExpanded else FCLLayout.OneColumn + ) --> layoutBus.writer ) ) //-- End diff --git a/demo/src/main/scala/demo/IllustratedMessageExample.scala b/demo/src/main/scala/demo/IllustratedMessageExample.scala index bd3f7df..d03c785 100644 --- a/demo/src/main/scala/demo/IllustratedMessageExample.scala +++ b/demo/src/main/scala/demo/IllustratedMessageExample.scala @@ -28,9 +28,7 @@ object IllustratedMessageExample extends Example("IllustratedMessage") { Button("Open Dialog", _.events.onClick.mapTo(true) --> dialogShowActionBus.writer), Dialog( _.headerText := "Error", - inContext(el => - dialogShowActionBus.events --> Observer[Boolean](if _ then el.ref.show() else el.ref.close()) - ), + _.open <-- dialogShowActionBus.events, IllustratedMessage(_.name := IllustratedMessageType.ErrorScreen), _.slots.footer := Bar( _.design := BarDesign.Footer, @@ -48,8 +46,7 @@ object IllustratedMessageExample extends Example("IllustratedMessage") { //-- Begin: Illustrated Message with sub-title slot IllustratedMessage( _.name := IllustratedMessageType.tnt.UnsuccessfulAuth, - _.titleText := "Something went wrong...", - _.titleLevel := TitleLevel.H4, + _.slots.title := Title.h4("Something went wrong..."), _.slots.subtitle := div("Please try again or contact us at ", Link("example@example.com"), "."), Button(_.icon := IconName.refresh, "Try again") ) diff --git a/demo/src/main/scala/demo/InputExample.scala b/demo/src/main/scala/demo/InputExample.scala index e159325..a11c96a 100644 --- a/demo/src/main/scala/demo/InputExample.scala +++ b/demo/src/main/scala/demo/InputExample.scala @@ -16,8 +16,8 @@ object InputExample extends Example("Input") { //-- Begin: Basic Input div( Input(_.showClearIcon := true, _.value := "Input"), - Input(_.readonly := true, _.value := "Readonly Input"), - Input(_.disabled := true, _.value := "Disabled Input") + Input(_.readonly := true, _.value := "Readonly Input"), + Input(_.disabled := true, _.value := "Disabled Input") ) //-- End ), @@ -36,20 +36,20 @@ object InputExample extends Example("Input") { .map( _.map(country => Input.suggestion( - _.icon := IconName.world, - _.additionalText := "explore", - _.additionalTextState := ValueState.Success, - _.description := "travel the world", - _.text := country + _.icon := IconName.world, + _.additionalText := "explore", + _.additionalTextState := ValueState.Positive, + _.description := "travel the world", + _.text := country ) ) ) Input( _.showSuggestions := true, - _.showClearIcon := true, - _.placeholder := "Start typing country name", - children <-- suggestions, + _.showClearIcon := true, + _.placeholder := "Start typing country name", + children <-- suggestions, _.events.onInput.mapToValue --> filterValueBus.writer ) //-- End @@ -63,8 +63,8 @@ object InputExample extends Example("Input") { //-- Begin: Input with Suggestions and Value State message div( Input( - _.placeholder := "Choose content density", - _.showSuggestions := true, + _.placeholder := "Choose content density", + _.showSuggestions := true, _.slots.valueStateMessage := div("This is an error message. Extra long text used as an error message."), List("Cozy", "Compact", "Condensed").map(item => UList.item(item)) ) @@ -81,7 +81,7 @@ object InputExample extends Example("Input") { div( Input( _.placeholder := "Enter search criteria", - width := "100%", + width := "100%", _.events.onInput.mapToValue --> searchCriteriaVar.writer, _.slots.icon := Icon(_.name := IconName.search, onClick.mapTo(()) --> showSearchResultBus.writer) ), @@ -93,15 +93,13 @@ object InputExample extends Example("Input") { _.slots.footer := div( Bar( _.slots.endContent := Button("Close", _.events.onClick.mapTo(()) --> closeSearchResultBus.writer), - _.design := BarDesign.Footer + _.design := BarDesign.Footer ) ), - inContext(el => - showSearchResultBus.events.sample(searchCriteriaVar.signal).filter(_.nonEmpty).mapTo(()) --> Observer(_ => - el.ref.show() - ) - ), - inContext(el => closeSearchResultBus.events --> Observer(_ => el.ref.close())) + _.open <-- EventStream.merge( + closeSearchResultBus.events.mapTo(false), + showSearchResultBus.events.sample(searchCriteriaVar.signal).filter(_.nonEmpty).mapTo(true) + ) ) ) //-- End @@ -112,17 +110,17 @@ object InputExample extends Example("Input") { className := loginFormClass, styleTagForLoginFormClass, div( - Label(_.forId := "myInput", _.required := true, _.showColon := true, "Name"), - Input(_.id := "myInput", _.placeholder := "Enter your Name", _.required := true) + Label(_.forId := "myInput", _.required := true, _.showColon := true, "Name"), + Input(_.id := "myInput", _.placeholder := "Enter your Name", _.required := true) ), div( Label(_.forId := "myPassword", _.required := true, _.showColon := true, "Secret Code"), Input( - _.id := "myPassword", - _.tpe := InputType.Password, - _.valueState := ValueState.Error, + _.id := "myPassword", + _.tpe := InputType.Password, + _.valueState := ValueState.Negative, _.placeholder := "Enter your Secret Code", - _.required := true + _.required := true ) ) ) diff --git a/demo/src/main/scala/demo/LabelExample.scala b/demo/src/main/scala/demo/LabelExample.scala index 1f946aa..3272d00 100644 --- a/demo/src/main/scala/demo/LabelExample.scala +++ b/demo/src/main/scala/demo/LabelExample.scala @@ -27,7 +27,7 @@ object LabelExample extends Example("Label") { ), DemoPanel("Truncated Label")( //-- Begin: Truncated Label - Label(width := "200px", "Long labels are truncated by default.") + Label(width := "200px", _.wrappingType := WrappingType.None, "Long labels are truncated with wrapping type None.") //-- End ), DemoPanel("Label 'for'")( @@ -38,10 +38,10 @@ object LabelExample extends Example("Label") { div( Label(_.id := "myLabel", _.forId := "myInput", _.required := true, _.showColon := true, "First name"), Input( - _.id := "myInput", - aria.required := true, + _.id := "myInput", + aria.required := true, _.accessibleNameRef := "myLabel", - _.placeholder := "Enter your name" + _.placeholder := "Enter your name" ) ), div( @@ -51,8 +51,8 @@ object LabelExample extends Example("Label") { div( Label(_.id := "myLabel3", _.forId := "mySelect", _.required := true, _.showColon := true, "Job"), Select( - _.id := "mySelect", - aria.required := true, + _.id := "mySelect", + aria.required := true, _.accessibleNameRef := "myLabel3", _.option("Manager"), _.option("Sales"), @@ -61,23 +61,23 @@ object LabelExample extends Example("Label") { ), div( Label( - _.id := "myLabel4", - _.forId := "myTextArea", - _.required := true, + _.id := "myLabel4", + _.forId := "myTextArea", + _.required := true, _.showColon := true, "Description label test" ), TextArea( - _.id := "myTextArea", + _.id := "myTextArea", _.accessibleNameRef := "myLabel4", - aria.required := true, - _.placeholder := "Type as much text as you wish." + aria.required := true, + _.placeholder := "Type as much text as you wish." ) ), div( - Label(_.forId := "myRB", _.required := true, _.showColon := true, "Gender"), - RadioButton(_.id := "myRB", _.name := "a", _.text := "Choice 1"), - RadioButton(_.id := "myRB2", _.name := "a", _.checked := true, _.text := "Choice 2") + Label(_.forId := "myRB", _.required := true, _.showColon := true, "Gender"), + RadioButton(_.id := "myRB", _.name := "a", _.text := "Choice 1"), + RadioButton(_.id := "myRB2", _.name := "a", _.checked := true, _.text := "Choice 2") ), div( Label(_.forId := "myCB", _.required := true, _.showColon := true, "Accept terms of use"), diff --git a/demo/src/main/scala/demo/ListExample.scala b/demo/src/main/scala/demo/ListExample.scala index 32fa176..8d37076 100644 --- a/demo/src/main/scala/demo/ListExample.scala +++ b/demo/src/main/scala/demo/ListExample.scala @@ -20,14 +20,14 @@ object ListExample extends Example("List") { _.icon := IconName.`nutrition-activity`, _.description := "Tropical plant with an edible fruit", _.additionalText := "In-stock", - _.additionalTextState := ValueState.Success, + _.additionalTextState := ValueState.Positive, "Pineapple" ), _.item( _.icon := IconName.`nutrition-activity`, _.description := "Occurs between red and yellow", _.additionalText := "Expires", - _.additionalTextState := ValueState.Warning, + _.additionalTextState := ValueState.Critical, "Orange" ), _.item( @@ -41,7 +41,7 @@ object ListExample extends Example("List") { _.icon := IconName.`nutrition-activity`, _.description := "The tropical stone fruit", _.additionalText := "Re-stock", - _.additionalTextState := ValueState.Error, + _.additionalTextState := ValueState.Negative, "Mango" ) ) @@ -81,7 +81,7 @@ object ListExample extends Example("List") { val maybeSelectedCountryVar: Var[Option[String]] = Var(Option.empty) UList( - _.mode := ListMode.SingleSelect, + _.selectionMode := ListMode.Single, _.headerText <-- maybeSelectedCountryVar.signal.map(maybeCountry => s"Select a country:${maybeCountry.fold("")(country => s" (selected: $country)")}" ), @@ -107,7 +107,7 @@ object ListExample extends Example("List") { } UList( - _.mode := ListMode.MultiSelect, + _.selectionMode := ListMode.Multiple, _.headerText <-- selectedItemsInfoSignal.map(selectedItems => s"Multiple selection is possible: ($selectedItems)" ), @@ -115,7 +115,7 @@ object ListExample extends Example("List") { UList.item( country, dataAttr("country-name") := country, - _.highlight := (if country == "Belgium" then ValueState.Success else ValueState.None) + _.highlight := (if country == "Belgium" then ValueState.Positive else ValueState.None) ) ), _.events.onSelectionChange.map( @@ -124,41 +124,47 @@ object ListExample extends Example("List") { ) //-- End }, - DemoPanel("Buzy List")( - //-- Begin: Buzy List - UList(_.busy := true, _.headerText := "Fetching data...") + DemoPanel("Loading List")( + //-- Begin: Loading List + UList(_.loading := true, _.headerText := "Fetching data...") //-- End ), DemoPanel("List with GroupHeaders") { //-- Begin: List with GroupHeaders - def expansionListItem(expansion: String) = (_: UList.type).item( + def expansionListItem(expansion: String) = UList.item( _.iconEnd := true, _.icon := IconName.`slim-arrow-right`, expansion ) UList( - _.mode := ListMode.MultiSelect, - _.headerText := "Expansion list", - _.group("Mirrodin Block"), - expansionListItem("Mirrodin"), - expansionListItem("Darksteel"), - expansionListItem("Fifth Dawn"), - _.group("Kamigawa Block"), - expansionListItem("Champions of Kamigawa"), - expansionListItem("Betrayers of Kamigawa"), - expansionListItem("Saviors of Kamigawa"), - _.group("Ravnica Block"), - expansionListItem("Ravnica: City of Guilds"), - expansionListItem("Guildpact"), - expansionListItem("Dissension") + _.selectionMode := ListMode.Multiple, + _.headerText := "Expansion list", + _.grouped( + _.headerText := "Mirrodin Block", + expansionListItem("Mirrodin"), + expansionListItem("Darksteel"), + expansionListItem("Fifth Dawn") + ), + _.grouped( + _.headerText := "Kamigawa Block", + expansionListItem("Champions of Kamigawa"), + expansionListItem("Betrayers of Kamigawa"), + expansionListItem("Saviors of Kamigawa") + ), + _.grouped( + _.headerText := "Ravnica Block", + expansionListItem("Ravnica: City of Guilds"), + expansionListItem("Guildpact"), + expansionListItem("Dissension") + ) ) //-- End }, DemoPanel("List in Delete Mode")( //-- Begin: List in Delete Mode UList( - _.mode := ListMode.Delete, - _.headerText := "Note: The list items removal is up to application developers", + _.selectionMode := ListMode.Delete, + _.headerText := "Note: The list items removal is up to application developers", countries.map(country => UList.item(country)) ) //-- End @@ -189,7 +195,7 @@ object ListExample extends Example("List") { val countryDeleteBus = new EventBus[String] div( UList( - _.mode := ListMode.Delete, + _.selectionMode := ListMode.Delete, countries .map(country => UList.item( diff --git a/demo/src/main/scala/demo/MenuExample.scala b/demo/src/main/scala/demo/MenuExample.scala index da6bf42..4414592 100644 --- a/demo/src/main/scala/demo/MenuExample.scala +++ b/demo/src/main/scala/demo/MenuExample.scala @@ -13,18 +13,23 @@ object MenuExample extends Example("Menu") { ): HtmlElement = div( DemoPanel("Basic Menu") { //-- Begin: Basic Menu - // feed the bus to open the menu at the fed element - val openMenuBus: EventBus[HTMLElement] = new EventBus + // feed the bus to open or close the menu + val openMenuBus: EventBus[Boolean] = new EventBus + + val menuOpenerId = "basic-menu-opener-id" div( - Button("Open Menu", _.events.onClick.map(_.target) --> openMenuBus.writer), + Button(idAttr := menuOpenerId, "Open Menu", _.events.onClick.mapTo(true) --> openMenuBus.writer), Menu( - inContext(el => openMenuBus.events.map(el.ref -> _) --> Observer[(Menu.Ref, HTMLElement)](_.showAt(_))), - _.item(_.text := "New File", _.icon := IconName.`add-document`), - _.item(_.text := "New Folder", _.icon := IconName.`add-folder`, _.disabled := true), - _.item(_.text := "Open", _.icon := IconName.`open-folder`, _.startsSection := true), + _.open <-- openMenuBus.events, + _.openerId := menuOpenerId, + _.item(_.text := "New File", _.icon := IconName.`add-document`), + _.item(_.text := "New Folder", _.icon := IconName.`add-folder`, _.disabled := true), + _.separator(), + _.item(_.text := "Open", _.icon := IconName.`open-folder`), _.item(_.text := "Close"), - _.item(_.text := "Preferences", _.icon := IconName.`action-settings`, _.startsSection := true), + _.separator(), + _.item(_.text := "Preferences", _.icon := IconName.`action-settings`), _.item(_.text := "Exit", _.icon := IconName.`journey-arrive`) ) ) @@ -32,19 +37,22 @@ object MenuExample extends Example("Menu") { }, DemoPanel("Menu with Sub-menu items") { //-- Begin: Menu with Sub-menu items - // feed the bus to open the menu at the fed element - val openMenuBus: EventBus[HTMLElement] = new EventBus + // feed the bus to open or close the menu + val openMenuBus: EventBus[Boolean] = new EventBus + + val menuOpenerId = "menu-with-sub-menu-items-opener-id" div( - Button("Open Menu", _.events.onClick.map(_.target) --> openMenuBus.writer), + Button(idAttr := menuOpenerId, "Open Menu", _.events.onClick.mapTo(true) --> openMenuBus.writer), Menu( - inContext(el => openMenuBus.events.map(el.ref -> _) --> Observer[(Menu.Ref, HTMLElement)](_.showAt(_))), + _.open <-- openMenuBus.events, + _.openerId := menuOpenerId, _.item(_.text := "New File", _.icon := IconName.`add-document`, _.additionalText := "Ctrl+N"), _.item(_.text := "New Folder", _.icon := IconName.`add-folder`, _.disabled := true), + _.separator(), _.item( - _.text := "Open", - _.icon := IconName.`open-folder`, - _.startsSection := true, + _.text := "Open", + _.icon := IconName.`open-folder`, _.item( _.text := "Open Locally", _.icon := IconName.`open-folder`, @@ -66,7 +74,8 @@ object MenuExample extends Example("Menu") { ) ), _.item(_.text := "Close"), - _.item(_.text := "Preferences", _.icon := IconName.`action-settings`, _.startsSection := true), + _.separator(), + _.item(_.text := "Preferences", _.icon := IconName.`action-settings`), _.item(_.text := "Exit", _.icon := IconName.`journey-arrive`) ) ) diff --git a/demo/src/main/scala/demo/MessageStripExample.scala b/demo/src/main/scala/demo/MessageStripExample.scala index 7e148b7..249ea00 100644 --- a/demo/src/main/scala/demo/MessageStripExample.scala +++ b/demo/src/main/scala/demo/MessageStripExample.scala @@ -37,7 +37,7 @@ object MessageStripExample extends Example("MessageStrip") { MessageStripDesign.allValues.map(design => MessageStrip( _.hideCloseButton := true, - _.design := design, + _.design := design, s"${design.value} MessageStrip with No Close Button" ) ) @@ -85,38 +85,38 @@ object MessageStripExample extends Example("MessageStrip") { //-- Begin: Custom MessageStrip div( MessageStrip( - _.design := MessageStripDesign.Information, - width := "300px", - _.hideIcon := true, + _.design := MessageStripDesign.Information, + width := "300px", + _.hideIcon := true, _.hideCloseButton := true, "You have new message" ), MessageStrip( - _.design := MessageStripDesign.Positive, - width := "300px", + _.design := MessageStripDesign.Positive, + width := "300px", _.hideCloseButton := true, "Successful login!" ), MessageStrip( - _.design := MessageStripDesign.Negative, - width := "300px", + _.design := MessageStripDesign.Negative, + width := "300px", _.hideIcon := true, "Access denied!" ), - MessageStrip(_.design := MessageStripDesign.Warning, width := "300px", "Update is required"), + MessageStrip(_.design := MessageStripDesign.Critical, width := "300px", "Update is required"), MessageStrip( - _.design := MessageStripDesign.Warning, - width := "300px", + _.design := MessageStripDesign.Critical, + width := "300px", _.slots.icon := Icon(_.name := IconName.palette), "Custom Icon" ), MessageStrip( _.design := MessageStripDesign.Positive, - width := "300px", + width := "300px", "Custom animated icon", _.slots.icon := img( - src := "https://sap.github.io/ui5-webcomponents/assets/images/loading.gif", - width := "16px", + src := "https://sap.github.io/ui5-webcomponents/assets/images/loading.gif", + width := "16px", height := "16px" ) ) diff --git a/demo/src/main/scala/demo/MultiComboBoxExample.scala b/demo/src/main/scala/demo/MultiComboBoxExample.scala index 7a4dc43..ede6beb 100644 --- a/demo/src/main/scala/demo/MultiComboBoxExample.scala +++ b/demo/src/main/scala/demo/MultiComboBoxExample.scala @@ -16,8 +16,8 @@ object MultiComboBoxExample extends Example("MultiComboBox") { //-- Begin: Basic MultiComboBox" div( MultiComboBox(_.placeholder := "Type your value", _.item(_.selected := true, _.text := "UI5")), - MultiComboBox(_.readonly := true, _.value := "Readonly combo", _.item(_.selected := true, _.text := "UI5")), - MultiComboBox(_.disabled := true, _.value := "Disabled combo", _.item(_.selected := true, _.text := "UI5")) + MultiComboBox(_.readonly := true, _.value := "Readonly combo", _.item(_.selected := true, _.text := "UI5")), + MultiComboBox(_.disabled := true, _.value := "Disabled combo", _.item(_.selected := true, _.text := "UI5")) ) //-- End ), @@ -25,22 +25,22 @@ object MultiComboBoxExample extends Example("MultiComboBox") { //-- Begin: MultiComboBox with items MultiComboBox( _.placeholder := "Choose your countries", - width := "500px", - countries.zipWithIndex.map((country, index) => - MultiComboBox.item(_.text := country, _.selected := (index == 0)) - ) + width := "500px", + countries.zipWithIndex.map((country, index) => + MultiComboBox.item(_.text := country, _.selected := (index == 0)) + ) ) //-- End ), DemoPanel("MultiComboBox with free text input")( //-- Begin: MultiComboBox with free text input MultiComboBox( - _.placeholder := "Choose your countries", - width := "500px", - _.allowCustomValues := true, - countries.zipWithIndex.map((country, index) => - MultiComboBox.item(_.text := country, _.selected := (index % 3 == 0)) - ) + _.placeholder := "Choose your countries", + width := "500px", + _.noValidation := true, + countries.zipWithIndex.map((country, index) => + MultiComboBox.item(_.text := country, _.selected := (index % 3 == 0)) + ) ) //-- End ), @@ -61,19 +61,21 @@ object MultiComboBoxExample extends Example("MultiComboBox") { //-- Begin: MultiComboBox with Grouping of Items MultiComboBox( _.placeholder := "Select a country", - _.group(_.text := "Asia"), - _.item(_.text := "Afghanistan"), - _.item(_.text := "China"), - _.item(_.text := "India"), - _.item(_.text := "Indonesia"), - _.group(_.text := "Europe"), - _.item(_.text := "Austria"), - _.item(_.text := "Belgium"), - _.item(_.text := "Germany"), - _.item(_.text := "Italy"), - _.group(_.text := "North America"), - _.item(_.text := "Canada"), - _.item(_.text := "United States") + _.group( + _.text := "Asia", + _.item(_.text := "Afghanistan"), + _.item(_.text := "China"), + _.item(_.text := "India"), + _.item(_.text := "Indonesia") + ), + _.group( + _.text := "Europe", + _.item(_.text := "Austria"), + _.item(_.text := "Belgium"), + _.item(_.text := "Germany"), + _.item(_.text := "Italy") + ), + _.group(_.text := "North America", _.item(_.text := "Canada"), _.item(_.text := "United States")) ) //-- End } diff --git a/demo/src/main/scala/demo/MultiInputExample.scala b/demo/src/main/scala/demo/MultiInputExample.scala index 52a1d68..c41e9ac 100644 --- a/demo/src/main/scala/demo/MultiInputExample.scala +++ b/demo/src/main/scala/demo/MultiInputExample.scala @@ -20,12 +20,12 @@ object MultiInputExample extends Example("MultiInput") { val firstValueVar = Var("basic input") val secondValueVar = Var("value help icon") div( - display := "flex", + display := "flex", className := loginFormClass, div( Label( _.wrappingType := WrappingType.Normal, - width := "200px", + width := "200px", "MultiInput", child.text <-- firstValueVar.signal.map(value => s" (current value is $value)") ), @@ -38,13 +38,13 @@ object MultiInputExample extends Example("MultiInput") { div( Label( _.wrappingType := WrappingType.Normal, - width := "200px", + width := "200px", "MultiInput", child.text <-- secondValueVar.signal.map(value => s" (current value is $value)") ), MultiInput( _.showValueHelpIcon := true, - _.value <-- secondValueVar, + _.value <-- secondValueVar, _.events.onInput.mapToValue --> secondValueVar.writer, _.events.onChange.mapToValue --> secondValueVar.writer ) @@ -82,16 +82,16 @@ object MultiInputExample extends Example("MultiInput") { val newValuesChanges = newValuesWithShouldWeUpdate.collect { case (values, true) => values } // When the new value was already present, we issue the error message ... - val valueStateBecomesErrorEvents = newValuesWithShouldWeUpdate.filter(!_._2).mapTo(ValueState.Error) + val valueStateBecomesErrorEvents = newValuesWithShouldWeUpdate.filter(!_._2).mapTo(ValueState.Negative) // ... and we clear it 2 seconds later val valueStateBecomesNormalEvents = valueStateBecomesErrorEvents.delay(2000).mapTo(ValueState.None) val valueStateChanges = EventStream.merge(valueStateBecomesErrorEvents, valueStateBecomesNormalEvents) MultiInput( - _.showSuggestions := true, - _.valueState <-- valueStateChanges, - width := "50%", + _.showSuggestions := true, + _.valueState <-- valueStateChanges, + width := "50%", _.slots.valueStateMessage := div("Token is already in the list"), countries.map(country => MultiInput.suggestion(_.text := country)), _.slots.tokens <-- tokenValuesVar.signal.map(_.map(tokenValue => MultiInput.token(_.text := tokenValue))), diff --git a/demo/src/main/scala/demo/NotificationListGroupItemExample.scala b/demo/src/main/scala/demo/NotificationListGroupItemExample.scala index b37f7af..5e293a5 100644 --- a/demo/src/main/scala/demo/NotificationListGroupItemExample.scala +++ b/demo/src/main/scala/demo/NotificationListGroupItemExample.scala @@ -15,35 +15,29 @@ object NotificationListGroupItemExample extends Example("NotificationListGroupIt UList( _.headerText := "Notifications grouped", _.notificationGroup( - _.showClose := true, - _.showCounter := true, - _.priority := Priority.High, _.titleText := "Some high priority notifications", _.item( _.showClose := true, _.titleText := "Some notification was triggered!", - _.priority := Priority.High + _.state := ValueState.Critical ), _.item( _.showClose := true, _.titleText := "Some other notification was triggered!", - _.priority := Priority.High + _.state := ValueState.Critical ) ), _.notificationGroup( - _.showClose := true, - _.showCounter := true, - _.priority := Priority.Medium, _.titleText := "Some medium priority notifications", _.item( _.showClose := true, _.titleText := "Some medium notification was triggered!", - _.priority := Priority.Medium + _.state := ValueState.Information ), _.item( _.showClose := true, _.titleText := "Some other medium notification was triggered!", - _.priority := Priority.Medium + _.state := ValueState.Information ) ) ) diff --git a/demo/src/main/scala/demo/NotificationListItemExample.scala b/demo/src/main/scala/demo/NotificationListItemExample.scala index 53a696e..25e62bd 100644 --- a/demo/src/main/scala/demo/NotificationListItemExample.scala +++ b/demo/src/main/scala/demo/NotificationListItemExample.scala @@ -39,26 +39,25 @@ object NotificationListItemExample extends Example("NotificationListItem") { dataAttr(notifIdName) := id ) - UList( - _.headerText := "Notifications", + NotificationList( _.events.onItemClose.map(_.detail.item) --> closeItemsBus.writer, - _.notificationItem( + _.item( notifWithId("notif-1"), _.showClose := true, _.titleText := "New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.", - _.priority := Priority.High, + _.state := ValueState.None, "And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.", - _.slots.avatar := Avatar(_.size := AvatarSize.XS, img(src := MTG.manaSymbolsRefs("W"))), + _.slots.avatar := Avatar(_.size := AvatarSize.XS, img(src := MTG.manaSymbolsRefs("W"))), _.slots.footnotes := span("Monique Legrand"), _.slots.footnotes := span("2 Days") ), - _.notificationItem( + _.item( notifWithId("notif-2"), _.showClose := true, _.titleText := "New order (#2526) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.", - _.priority := Priority.High, + _.state := ValueState.Negative, "And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.", - _.slots.avatar := Avatar(_.size := AvatarSize.XS, img(src := MTG.manaSymbolsRefs("B"))), + _.slots.avatar := Avatar(_.size := AvatarSize.XS, img(src := MTG.manaSymbolsRefs("B"))), _.slots.footnotes := span("Alain Chevalier"), _.slots.footnotes := span("2 Days") ) @@ -70,38 +69,39 @@ object NotificationListItemExample extends Example("NotificationListItem") { val openNotifPopoverBus: EventBus[dom.HTMLElement] = new EventBus div( ShellBar( - _.primaryTitle := "Corporate Portal", - _.slots.logo := img(src := "/images/avatars/scala-logo.png"), - _.showNotifications := true, + _.primaryTitle := "Corporate Portal", + _.slots.logo := img(src := "/images/avatars/scala-logo.png"), + _.showNotifications := true, _.notificationsCount := "4", _.events.onNotificationsClick.map(_.detail.targetRef) --> openNotifPopoverBus.writer ), Popover( inContext(el => openNotifPopoverBus.events.map(el.ref -> _) --> Popover.showAtObserver), - maxWidth := "600px", - _.placementType := PopoverPlacementType.Bottom, - _.horizontalAlign := PopoverHorizontalAlign.Right, - UList( - _.headerText := "Notifications", + maxWidth := "600px", + _.placement := PopoverPlacementType.Bottom, + _.horizontalAlign := PopoverHorizontalAlign.End, + NotificationList( _.events.onItemClose.map(_.detail.item) --> closeItemsBus.writer, - _.notificationItem( + _.item( notifWithId("notif-shellbar-1"), _.showClose := true, _.titleText := "New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.", - _.priority := Priority.High, + _.state := ValueState.Critical, "And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.", - _.slots.avatar := Avatar(_.size := AvatarSize.XS, img(src := MTG.manaSymbolsRefs("W"))), + _.slots.avatar := Avatar(_.size := AvatarSize.XS, img(src := MTG.manaSymbolsRefs("W"))), _.slots.footnotes := span("Monique Legrand"), _.slots.footnotes := span("2 Days"), - _.slots.actions := NotificationListItem.action(_.icon := IconName.accept, _.text := "Accept") + _.slots.menu := Menu( + _.item(_.icon := IconName.accept, _.text := "Accept") + ) ), - _.notificationItem( + _.item( notifWithId("notif-shellbar-2"), _.showClose := true, _.titleText := "New order (#2526) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.", - _.priority := Priority.High, + _.state := ValueState.Information, "And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.", - _.slots.avatar := Avatar(_.size := AvatarSize.XS, img(src := MTG.manaSymbolsRefs("B"))), + _.slots.avatar := Avatar(_.size := AvatarSize.XS, img(src := MTG.manaSymbolsRefs("B"))), _.slots.footnotes := span("Alain Chevalier"), _.slots.footnotes := span("2 Days") ) diff --git a/demo/src/main/scala/demo/PageExample.scala b/demo/src/main/scala/demo/PageExample.scala index 91e712e..2703313 100644 --- a/demo/src/main/scala/demo/PageExample.scala +++ b/demo/src/main/scala/demo/PageExample.scala @@ -13,36 +13,35 @@ object PageExample extends Example("Page") { DemoPanel("Page with floating footer") { //-- Begin: Page with floating footer Page( - _.floatingFooter := true, height := "500px", - width := "500px", + width := "500px", _.slots.header := Bar( - _.design := BarDesign.Header, + _.design := BarDesign.Header, _.slots.startContent := Button(_.tooltip := "Go Home", _.icon := IconName.home), - _.slots.endContent := Button(_.tooltip := "Settings", _.icon := IconName.`action-settings`), + _.slots.endContent := Button(_.tooltip := "Settings", _.icon := IconName.`action-settings`), "Page Title" ), - div( - overflowY := "auto", - p( - "103.3. Each player begins the game with a starting life total of 20. Some variant games have different starting life totals." - ), - p("103.3a In a Two-Headed Giant game, each team’s starting life total is 30."), - p( - "103.3b In a Vanguard game, each player’s starting life total is 20 plus or minus the life modifier of their vanguard card." - ), - p("103.3c In a Commander game, each player’s starting life total is 40."), - p( - "103.3d In a two-player Brawl game, each player’s starting life total is 25. In a multiplayer Brawl game, each player’s starting life total is 30." - ), - p("103.3e In an Archenemy game, the archenemy’s starting life total is 40.") + div( + overflowY := "auto", + p( + "103.3. Each player begins the game with a starting life total of 20. Some variant games have different starting life totals." ), + p("103.3a In a Two-Headed Giant game, each team’s starting life total is 30."), + p( + "103.3b In a Vanguard game, each player’s starting life total is 20 plus or minus the life modifier of their vanguard card." + ), + p("103.3c In a Commander game, each player’s starting life total is 40."), + p( + "103.3d In a two-player Brawl game, each player’s starting life total is 25. In a multiplayer Brawl game, each player’s starting life total is 30." + ), + p("103.3e In an Archenemy game, the archenemy’s starting life total is 40.") + ), _.slots.footer := Bar( - _.design := BarDesign.FloatingFooter, + _.design := BarDesign.FloatingFooter, _.slots.startContent := Button(_.design := ButtonDesign.Transparent, _.icon := IconName.home), - _.slots.endContent := Button(_.design := ButtonDesign.Positive, "Accept"), - _.slots.endContent := Button(_.design := ButtonDesign.Negative, "Reject"), - _.slots.endContent := Button(_.design := ButtonDesign.Transparent, "Cancel") + _.slots.endContent := Button(_.design := ButtonDesign.Positive, "Accept"), + _.slots.endContent := Button(_.design := ButtonDesign.Negative, "Reject"), + _.slots.endContent := Button(_.design := ButtonDesign.Transparent, "Cancel") ) ) //-- End diff --git a/demo/src/main/scala/demo/PanelExample.scala b/demo/src/main/scala/demo/PanelExample.scala index 54fa226..531c4a6 100644 --- a/demo/src/main/scala/demo/PanelExample.scala +++ b/demo/src/main/scala/demo/PanelExample.scala @@ -34,7 +34,7 @@ object PanelExample extends Example("Panel") { _.headerText := "Select your country", width := "100%", UList( - _.mode := ListMode.MultiSelect, + _.selectionMode := ListMode.Multiple, countries.map(country => UList.item(country)) ) ) @@ -46,7 +46,7 @@ object PanelExample extends Example("Panel") { _.fixed := true, _.headerText := "Country Of Birth", UList( - _.mode := ListMode.SingleSelectBegin, + _.selectionMode := ListMode.SingleSelectBegin, countries.map(country => UList.item(country)) ) ) @@ -75,7 +75,7 @@ object PanelExample extends Example("Panel") { ) ), UList( - _.mode := ListMode.MultiSelect, + _.selectionMode := ListMode.Multiple, countries.map(country => UList.item(country)) ) ) diff --git a/demo/src/main/scala/demo/ProductSwitchExample.scala b/demo/src/main/scala/demo/ProductSwitchExample.scala index 762eb64..c5a4b2e 100644 --- a/demo/src/main/scala/demo/ProductSwitchExample.scala +++ b/demo/src/main/scala/demo/ProductSwitchExample.scala @@ -16,11 +16,11 @@ object ProductSwitchExample extends Example("ProductSwitch") { ProductSwitch( _.item(_.titleText := "Home", _.subtitleText := "Central Home", _.icon := IconName.home), _.item( - _.titleText := "Analytics Cloud", + _.titleText := "Analytics Cloud", _.subtitleText := "Analystics Could", - _.icon := IconName.`business-objects-experience` + _.icon := IconName.`business-objects-experience` ), - _.item(_.titleText := "Catalog", _.subtitleText := "Ariba", _.icon := IconName.contacts), + _.item(_.titleText := "Catalog", _.subtitleText := "Ariba", _.icon := IconName.contacts), _.item(_.titleText := "Travel & Expense", _.subtitleText := "Concur", _.icon := IconName.flight) ) //-- End @@ -38,31 +38,26 @@ object ProductSwitchExample extends Example("ProductSwitch") { div( ShellBar( - _.primaryTitle := "Corporate Portal", - _.secondaryTitle := "secondary title", - _.slots.logo := img(src := "/images/avatars/scala-logo.png"), + _.primaryTitle := "Corporate Portal", + _.secondaryTitle := "secondary title", + _.slots.logo := img(src := "/images/avatars/scala-logo.png"), _.showProductSwitch := true, - _.showCoPilot := true, + _.showCoPilot := true, _.events.onProductSwitchClick.map(_.detail.targetRef) --> togglePopoverOpeningEventBus.writer ), Popover( - inContext(el => - togglePopoverOpeningEvents --> Observer[Option[HTMLElement]] { - case Some(element) => el.ref.showAt(element) - case None => el.ref.close() - } + _.showAtAndCloseFromEvents(togglePopoverOpeningEvents), + _.placement := PopoverPlacementType.Bottom, + ProductSwitch( + _.item(_.titleText := "Home", _.subtitleText := "Central Home", _.icon := IconName.home), + _.item( + _.titleText := "Analytics Cloud", + _.subtitleText := "Analystics Could", + _.icon := IconName.`business-objects-experience` ), - _.placementType := PopoverPlacementType.Bottom, - ProductSwitch( - _.item(_.titleText := "Home", _.subtitleText := "Central Home", _.icon := IconName.home), - _.item( - _.titleText := "Analytics Cloud", - _.subtitleText := "Analystics Could", - _.icon := IconName.`business-objects-experience` - ), - _.item(_.titleText := "Catalog", _.subtitleText := "Ariba", _.icon := IconName.contacts), - _.item(_.titleText := "Travel & Expense", _.subtitleText := "Concur", _.icon := IconName.flight) - ) + _.item(_.titleText := "Catalog", _.subtitleText := "Ariba", _.icon := IconName.contacts), + _.item(_.titleText := "Travel & Expense", _.subtitleText := "Concur", _.icon := IconName.flight) + ) ) ) //-- End diff --git a/demo/src/main/scala/demo/RadioButtonExample.scala b/demo/src/main/scala/demo/RadioButtonExample.scala index ce6fad5..c30dc83 100644 --- a/demo/src/main/scala/demo/RadioButtonExample.scala +++ b/demo/src/main/scala/demo/RadioButtonExample.scala @@ -16,12 +16,12 @@ object RadioButtonExample extends Example("RadioButton") { val name = "GroupA" div( - RadioButton(_.text := texts.head, _.value := texts.head, _.checked := true, _.name := name), - RadioButton(_.text := texts(1), _.value := texts(1), _.valueState := ValueState.None, _.name := name), - RadioButton(_.text := texts(2), _.value := texts(2), _.valueState := ValueState.Warning, _.name := name), - RadioButton(_.text := texts(6), _.value := texts(6), _.disabled := true, _.name := name), - RadioButton(_.text := texts(7), _.value := texts(7), _.readonly := true, _.name := name), - RadioButton(_.text := texts(8), _.value := texts(8), _.required := true, _.name := name) + RadioButton(_.text := texts.head, _.value := texts.head, _.checked := true, _.name := name), + RadioButton(_.text := texts(1), _.value := texts(1), _.valueState := ValueState.None, _.name := name), + RadioButton(_.text := texts(2), _.value := texts(2), _.valueState := ValueState.Critical, _.name := name), + RadioButton(_.text := texts(6), _.value := texts(6), _.disabled := true, _.name := name), + RadioButton(_.text := texts(7), _.value := texts(7), _.readonly := true, _.name := name), + RadioButton(_.text := texts(8), _.value := texts(8), _.required := true, _.name := name) ) //-- End }, @@ -33,14 +33,14 @@ object RadioButtonExample extends Example("RadioButton") { h1("Group of states"), Label(child.text <-- selectedValueVar.signal.map(state => s"Selected radio: $state")), div( - display := "flex", + display := "flex", flexDirection := "column", ValueState.allValues.map(state => RadioButton( _.name := "GroupB", _.text := state.value, _.events.onChange.mapToChecked.filter(identity).mapTo(state.value) --> selectedValueVar.writer, - _.checked <-- selectedValueVar.signal.map(_ == state.value), + _.checked <-- selectedValueVar.signal.map(_ == state.value), _.valueState := state ) ) @@ -52,16 +52,16 @@ object RadioButtonExample extends Example("RadioButton") { //-- Begin: RadioButton with Text Wrapping div( RadioButton( - width := "300px", - _.text := "ui5-radio-button with 'wrapping-type=Normal' set and some long text", + width := "300px", + _.text := "ui5-radio-button with 'wrapping-type=Normal' set and some long text", _.wrappingType := WrappingType.Normal, - _.name := "GroupD" + _.name := "GroupD" ), RadioButton( - width := "200px", - _.text := "Another ui5-radio-button with very long text here", + width := "200px", + _.text := "Another ui5-radio-button with very long text here", _.wrappingType := WrappingType.Normal, - _.name := "GroupD" + _.name := "GroupD" ) ) //-- End diff --git a/demo/src/main/scala/demo/SegmentedButtonExample.scala b/demo/src/main/scala/demo/SegmentedButtonExample.scala index b1ad65b..fdc33c2 100644 --- a/demo/src/main/scala/demo/SegmentedButtonExample.scala +++ b/demo/src/main/scala/demo/SegmentedButtonExample.scala @@ -15,7 +15,7 @@ object SegmentedButtonExample extends Example("SegmentedButton") { SegmentedButton( _.accessibleName := "Geographic location", _.item("Map"), - _.item("Satellite", _.pressed := true), + _.item("Satellite", _.selected := true), _.item("Terrain") ) //-- End @@ -23,7 +23,7 @@ object SegmentedButtonExample extends Example("SegmentedButton") { DemoPanel("SegmentedButton with Icons")( //-- Begin: SegmentedButton with Icons SegmentedButton( - _.item(_.icon := IconName.employee, _.pressed := true), + _.item(_.icon := IconName.employee, _.selected := true), _.item(_.icon := IconName.menu), _.item(_.icon := IconName.factory) ) @@ -33,7 +33,7 @@ object SegmentedButtonExample extends Example("SegmentedButton") { //-- Begin: SegmentedButton with 5 SegmentedButtonItems SegmentedButton( _.item("Item"), - _.item("Pressed SegmentedButtonItem With Bigger Text", _.pressed := true), + _.item("Pressed SegmentedButtonItem With Bigger Text", _.selected := true), _.item("Item"), _.item("SegmentedButtonItem"), _.item("Press me") @@ -45,7 +45,7 @@ object SegmentedButtonExample extends Example("SegmentedButton") { //-- Begin: SegmentedButton with multi-select div( SegmentedButton( - _.mode := SegmentedButtonMode.MultiSelect, + _.selectionMode := SegmentedButtonMode.Multiple, _.item("First Item", _.accessibleName := "first"), _.item("Second Item", _.accessibleName := "second"), _.item("Third Item", _.accessibleName := "third"), diff --git a/demo/src/main/scala/demo/SelectExample.scala b/demo/src/main/scala/demo/SelectExample.scala index ef8cd54..da6ebc7 100644 --- a/demo/src/main/scala/demo/SelectExample.scala +++ b/demo/src/main/scala/demo/SelectExample.scala @@ -97,6 +97,28 @@ object SelectExample extends Example("Select") { ) ) //-- End + }, + DemoPanel("Custom Options") { + //-- Begin: Custom Options + def customOption(displayText: String, fullText: String) = + Select.optionCustom( + _.displayText := displayText, + div( + display.flex, + justifyContent.spaceBetween, + width := "100%", + Icon(_.name := IconName.soccer), + fullText, + Icon(_.name := IconName.employee) + ) + ) + + Select( + customOption("BE", "Belgium"), + customOption("CH", "Switzerland"), + customOption("FR", "France") + ) + //-- End } ) diff --git a/demo/src/main/scala/demo/ShellBarExample.scala b/demo/src/main/scala/demo/ShellBarExample.scala index d53675e..3dd36e4 100644 --- a/demo/src/main/scala/demo/ShellBarExample.scala +++ b/demo/src/main/scala/demo/ShellBarExample.scala @@ -14,41 +14,45 @@ object ShellBarExample extends Example("ShellBar") { DemoPanel("ShellBar") { //-- Begin: ShellBar val openPopoverBus: EventBus[HTMLElement] = new EventBus + + val profileId = "shellbar-profile-id" + div( ShellBar( - _.primaryTitle := "Corporate Portal", - _.secondaryTitle := "Secondary title", + _.primaryTitle := "Corporate Portal", + _.secondaryTitle := "Secondary title", _.notificationsCount := "99+", - _.showNotifications := true, - _.showProductSwitch := true, - _.showCoPilot := true, - _.slots.profile := Avatar(img(src := "/images/avatars/sherpal.png")), - _.slots.logo := img(src := "/images/avatars/scala-logo.png"), - _.slots.startButton := Button(_.icon := IconName.`nav-back`), - _.item(_.icon := IconName.disconnected, _.text := "Disconnected"), + _.showNotifications := true, + _.showProductSwitch := true, + _.showCoPilot := true, + _.slots.profile := Avatar(idAttr := profileId, img(src := "/images/avatars/sherpal.png")), + _.slots.logo := img(src := "/images/avatars/scala-logo.png"), + _.slots.startButton := Button(_.icon := IconName.`nav-back`), + _.item(_.icon := IconName.disconnected, _.text := "Disconnected"), _.item(_.icon := IconName.`incoming-call`, _.text := "Incoming Calls", _.count := "4"), _.slots.searchField := Input(), - _.slots.menuItems := UList.item("Application 1"), - _.slots.menuItems := UList.item("Application 2"), - _.slots.menuItems := UList.item("Application 3"), - _.slots.menuItems := UList.item("Application 4"), - _.slots.menuItems := UList.item("Application 5"), + _.slots.menuItems := UList.item("Application 1"), + _.slots.menuItems := UList.item("Application 2"), + _.slots.menuItems := UList.item("Application 3"), + _.slots.menuItems := UList.item("Application 4"), + _.slots.menuItems := UList.item("Application 5"), _.events.onProfileClick.map(_.detail.targetRef) --> openPopoverBus.writer ), Popover( - inContext(el => openPopoverBus.events --> Observer[HTMLElement](el.ref.showAt)), - _.placementType := PopoverPlacementType.Bottom, + _.openerId := profileId, + _.open <-- openPopoverBus.events.mapTo(true), + _.placement := PopoverPlacementType.Bottom, div(Title(padding := "0.25rem 1rem 0rem 1rem", "sherpal")), - div( - UList( - _.separators := ListSeparator.None, - _.item(_.icon := IconName.`sys-find`, "App Finder"), - _.item(_.icon := IconName.settings, "Settings"), - _.item(_.icon := IconName.edit, "Edit Home Page"), - _.item(_.icon := IconName.`sys-help`, "Help"), - _.item(_.icon := IconName.log, "Sign out") - ) + div( + UList( + _.separators := ListSeparator.None, + _.item(_.icon := IconName.`sys-find`, "App Finder"), + _.item(_.icon := IconName.settings, "Settings"), + _.item(_.icon := IconName.edit, "Edit Home Page"), + _.item(_.icon := IconName.`sys-help`, "Help"), + _.item(_.icon := IconName.log, "Sign out") ) + ) ) ) //-- End @@ -56,10 +60,10 @@ object ShellBarExample extends Example("ShellBar") { DemoPanel("Basic ShellBar")( //-- Begin: Basic ShellBar ShellBar( - _.primaryTitle := "Corporate Portal", - _.secondaryTitle := "secondary title", - _.slots.profile := Avatar(_.icon := IconName.customer), - _.slots.logo := img(src := "/images/avatars/scala-logo.png"), + _.primaryTitle := "Corporate Portal", + _.secondaryTitle := "secondary title", + _.slots.profile := Avatar(_.icon := IconName.customer), + _.slots.logo := img(src := "/images/avatars/scala-logo.png"), _.slots.startButton := Button(_.icon := IconName.`nav-back`) ) //-- End diff --git a/demo/src/main/scala/demo/SplitButtonExample.scala b/demo/src/main/scala/demo/SplitButtonExample.scala index d77d457..d0518fc 100644 --- a/demo/src/main/scala/demo/SplitButtonExample.scala +++ b/demo/src/main/scala/demo/SplitButtonExample.scala @@ -24,8 +24,7 @@ object SplitButtonExample extends Example("SplitButton") { DemoPanel("SplitButton with Icons") { //-- Begin: SplitButton with Icons div( - SplitButton("Icon", _.icon := IconName.add), - SplitButton("Icon + Active Icon", _.icon := IconName.add, _.activeIcon := IconName.accept) + SplitButton("Icon", _.icon := IconName.add) ) //-- End }, @@ -33,12 +32,16 @@ object SplitButtonExample extends Example("SplitButton") { //-- Begin: SplitButton opening Popover on arrow-click val arrowClickBus: EventBus[dom.HTMLElement] = new EventBus + val openerId = "SplitButton-opening-Popover-on-arrow-click" + div( Popover( - _.showAtFromEvents(arrowClickBus.events), + _.openerId := openerId, + _.open <-- arrowClickBus.events.mapTo(true), "Put whatever you want do show on arrow-click." ), SplitButton( + idAttr := openerId, "Expand ->", _.events.onArrowClick.map(_.target) --> arrowClickBus.writer ) diff --git a/demo/src/main/scala/demo/TabContainerExample.scala b/demo/src/main/scala/demo/TabContainerExample.scala index d169037..1b20d50 100644 --- a/demo/src/main/scala/demo/TabContainerExample.scala +++ b/demo/src/main/scala/demo/TabContainerExample.scala @@ -16,39 +16,43 @@ object TabContainerExample extends Example("TabContainer") { width := "100%", _.tab( _.text := "Tab 1", - Label( "100.1. These Magic rules apply to any Magic game with two or more players, including two-player games and multiplayer games." - ) + Label( + "100.1. These Magic rules apply to any Magic game with two or more players, including two-player games and multiplayer games." + ) ), _.tab( - _.text := "Tab 2", - _.icon := IconName.activities, + _.text := "Tab 2", + _.icon := IconName.activities, _.selected := true, Label("100.1a A two-player game is a game that begins with only two players.") ), _.tab( _.text := "Tab 3", _.icon := IconName.add, - Label( "100.1b A multiplayer game is a game that begins with more than two players. See section 8, " + - "“Multiplayer Rules.”" - ) + Label( + "100.1b A multiplayer game is a game that begins with more than two players. See section 8, " + + "“Multiplayer Rules.”" + ) ), _.tab( _.text := "Tab 4", _.icon := IconName.calendar, - Label( "100.2. To play, each player needs their own deck of traditional Magic cards, small items to represent" + - " any tokens and counters, and some way to clearly track life totals." - ) + Label( + "100.2. To play, each player needs their own deck of traditional Magic cards, small items to represent" + + " any tokens and counters, and some way to clearly track life totals." + ) ), _.tabSeparator, _.tab( _.text := "Tab 5", _.icon := IconName.`action-settings`, - Label( "100.2a In constructed play (a way of playing in which each player creates their own deck ahead of " + - "time), each deck has a minimum deck size of 60 cards. A constructed deck may contain any number of " + - "basic land cards and no more than four of any card with a particular English name other than basic " + - "land cards. For the purposes of deck construction, cards with interchangeable names have the same " + - "English name (see rule 201.3)." - ) + Label( + "100.2a In constructed play (a way of playing in which each player creates their own deck ahead of " + + "time), each deck has a minimum deck size of 60 cards. A constructed deck may contain any number of " + + "basic land cards and no more than four of any card with a particular English name other than basic " + + "land cards. For the purposes of deck construction, cards with interchangeable names have the same " + + "English name (see rule 201.3)." + ) ) ) //-- End @@ -57,7 +61,6 @@ object TabContainerExample extends Example("TabContainer") { //-- Begin: TabContainer with text only tabs TabContainer( _.collapsed := true, - _.fixed := true, _.tab(_.text := "Home"), _.tab(_.text := "What's new", _.selected := true), _.tab(_.text := "Who are we"), @@ -69,9 +72,8 @@ object TabContainerExample extends Example("TabContainer") { DemoPanel("Text only End Overflow")( //-- Begin: Text only End Overflow TabContainer( - width := "100%", + width := "100%", _.collapsed := true, - _.fixed := true, (1 to 23).toList.map(index => TabContainer.tab(_.text := s"Tab $index", _.selected := (index == 13))) ) //-- End @@ -79,10 +81,9 @@ object TabContainerExample extends Example("TabContainer") { DemoPanel("Text only Start and End Overflow")( //-- Begin: Text only Start and End Overflow TabContainer( - width := "100%", - _.collapsed := true, - _.fixed := true, - _.tabsOverflowMode := TabsOverflowMode.StartAndEnd, + width := "100%", + _.collapsed := true, + _.overflowMode := TabsOverflowMode.StartAndEnd, (1 to 33).toList.map(index => TabContainer.tab(_.text := s"Tab $index", _.selected := (index == 17))) ) //-- End @@ -90,13 +91,12 @@ object TabContainerExample extends Example("TabContainer") { DemoPanel("TabContainer with text and additional-text")( //-- Begin: TabContainer with text and additional-text TabContainer( - _.collapsed := true, - _.fixed := true, - _.tabsOverflowMode := TabsOverflowMode.StartAndEnd, - _.tab(_.text := "Info", _.additionalText := "3"), + _.collapsed := true, + _.overflowMode := TabsOverflowMode.StartAndEnd, + _.tab(_.text := "Info", _.additionalText := "3"), _.tab(_.text := "Attachments", _.additionalText := "24", _.selected := true), - _.tab(_.text := "Notes", _.additionalText := "16"), - _.tab(_.text := "People", _.additionalText := "34") + _.tab(_.text := "Notes", _.additionalText := "16"), + _.tab(_.text := "People", _.additionalText := "34") ) //-- End ), @@ -108,14 +108,14 @@ object TabContainerExample extends Example("TabContainer") { _.tab( _.text := "Products", "Products go here ...", - _.slots.subTabs := TabContainer.tab( + _.slots.items := TabContainer.tab( _.text := "Computers", "Computers go here ...", - _.slots.subTabs := TabContainer.tab(_.text := "Laptops", "Laptops go here ..."), - _.slots.subTabs := TabContainer.tab( - _.text := "Desktops", - _.slots.subTabs := TabContainer.tab(_.text := "Work Stations", "Work Stations go here ..."), - _.slots.subTabs := TabContainer.tab(_.text := "Game Stations", "Game Stations to here"), + _.slots.items := TabContainer.tab(_.text := "Laptops", "Laptops go here ..."), + _.slots.items := TabContainer.tab( + _.text := "Desktops", + _.slots.items := TabContainer.tab(_.text := "Work Stations", "Work Stations go here ..."), + _.slots.items := TabContainer.tab(_.text := "Game Stations", "Game Stations to here"), "Desktops go here ..." ) ) @@ -123,7 +123,7 @@ object TabContainerExample extends Example("TabContainer") { _.tab( _.text := "Orders", "Orders go here ...", - _.slots.subTabs := TabContainer.tab(_.text := "Attachments", "Attachments go here ...") + _.slots.items := TabContainer.tab(_.text := "Attachments", "Attachments go here ...") ) ) //-- End diff --git a/demo/src/main/scala/demo/BadgeExample.scala b/demo/src/main/scala/demo/TagExample.scala similarity index 52% rename from demo/src/main/scala/demo/BadgeExample.scala rename to demo/src/main/scala/demo/TagExample.scala index 5bed413..a747802 100644 --- a/demo/src/main/scala/demo/BadgeExample.scala +++ b/demo/src/main/scala/demo/TagExample.scala @@ -5,7 +5,7 @@ import be.doeraene.webcomponents.ui5.configkeys.* import com.raquo.laminar.api.L.* import demo.helpers.{DemoPanel, Example, FetchDemoPanelFromGithub} -object BadgeExample extends Example("Badge") { +object TagExample extends Example("Tag") { private val someTexts = LazyList .continually( @@ -27,24 +27,28 @@ object BadgeExample extends Example("Badge") { def component(using demoPanelInfoMap: FetchDemoPanelFromGithub.CompleteDemoPanelInfo ): HtmlElement = div( - DemoPanel("Basic badge")( - //-- Begin: Basic badge + DemoPanel("Basic tag")( + //-- Begin: Basic tag div( ColourScheme.allValues .zip(someTexts) - .map((colourScheme, text) => Badge(_.colourScheme := colourScheme, text)), - BadgeDesign.allValues + .map((colourScheme, text) => Tag(_.colourScheme := colourScheme, text)), + TagDesign.allValues .zip(someTexts) - .map((design, text) => Badge(_.design := design, text)), - Badge(width := "200px", "This text is very long and it will be truncated with ellipsis") + .map((design, text) => Tag(_.design := design, text)), + Tag( + width := "200px", + "This text is very long and it will be truncated with ellipsis", + _.wrappingType := WrappingType.None + ) ) //-- End ), - DemoPanel("Badge with icon")( - //-- Begin: Badge with icon + DemoPanel("Tag with icon")( + //-- Begin: Tag with icon div( - Badge(_.colourScheme := ColourScheme._1, _.slots.icon := Icon(_.name := IconName.add), "Add"), - Badge(_.colourScheme := ColourScheme._2, _.slots.icon := Icon(_.name := IconName.customer)) + Tag(_.colourScheme := ColourScheme._1, _.slots.icon := Icon(_.name := IconName.add), "Add"), + Tag(_.colourScheme := ColourScheme._2, _.slots.icon := Icon(_.name := IconName.customer)) ) //-- End ) diff --git a/demo/src/main/scala/demo/TimePickerExample.scala b/demo/src/main/scala/demo/TimePickerExample.scala index 137c7f2..5ed71cc 100644 --- a/demo/src/main/scala/demo/TimePickerExample.scala +++ b/demo/src/main/scala/demo/TimePickerExample.scala @@ -37,7 +37,7 @@ object TimePickerExample extends Example("TimePicker") { }, DemoPanel("TimePicker with value-state and valueStateMessage") { //-- Begin: TimePicker with value-state and valueStateMessage - TimePicker(_.valueState := ValueState.Error, _.slots.valueStateMessage := div("Please provide a valid value")) + TimePicker(_.valueState := ValueState.Negative, _.slots.valueStateMessage := div("Please provide a valid value")) //-- End } ) diff --git a/demo/src/main/scala/demo/ToastExample.scala b/demo/src/main/scala/demo/ToastExample.scala index 0a547ef..98900af 100644 --- a/demo/src/main/scala/demo/ToastExample.scala +++ b/demo/src/main/scala/demo/ToastExample.scala @@ -19,7 +19,10 @@ object ToastExample extends Example("Toast") { div( Button("Basic Toast", _.events.onClick.mapTo(()) --> toastBus.writer), Toast( - _.showFromEvents(toastBus.events), + _.open <-- toastBus.events.mapTo(true), + _.events.onClose.mapTo(()) --> Observer[Any] { _ => + println("The toast closed.") + }, "Basic Toast" ), MessageStrip( @@ -37,17 +40,17 @@ object ToastExample extends Example("Toast") { div( Button("Short Toast", _.events.onClick.mapTo(()) --> shortToastBus.writer), Toast( - _.duration := 1500.millis, + _.duration := 1500.millis, _.placement := ToastPlacement.BottomStart, "Short Toast", - _.showFromEvents(shortToastBus.events) + _.open <-- shortToastBus.events.mapTo(true) ), Button("Long Toast", _.events.onClick.mapTo(()) --> longToastBus.writer), Toast( - _.duration := 4500.millis, + _.duration := 4500.millis, _.placement := ToastPlacement.BottomEnd, "Long Toast", - _.showFromEvents(longToastBus.events) + _.open <-- longToastBus.events.mapTo(true) ) ) //-- End @@ -60,7 +63,7 @@ object ToastExample extends Example("Toast") { List( Button(placement.value, _.events.onClick.mapTo(()) --> toastBus.writer), - Toast(_.placement := placement, _.showFromEvents(toastBus.events), placement.value) + Toast(_.placement := placement, _.open <-- toastBus.events.mapTo(true), placement.value) ) } ) diff --git a/demo/src/main/scala/demo/TreeExample.scala b/demo/src/main/scala/demo/TreeExample.scala index 6892da9..0b89552 100644 --- a/demo/src/main/scala/demo/TreeExample.scala +++ b/demo/src/main/scala/demo/TreeExample.scala @@ -17,12 +17,12 @@ object TreeExample extends Example("Tree") { width := "100%", _.item( _.expanded := true, - _.text := "Tree 1", - _.icon := IconName.paste, + _.text := "Tree 1", + _.icon := IconName.paste, _.selected := true, _.item( _.expanded := true, - _.text := "Tree 1.1", + _.text := "Tree 1.1", _.selected := true, _.item(_.text := "Tree 1.1.1"), _.item(_.text := "Tree 1.1.2") @@ -38,7 +38,7 @@ object TreeExample extends Example("Tree") { ) ), _.item( - _.text := "Tree 3 (no icon)", + _.text := "Tree 3 (no icon)", _.expanded := true ) ) @@ -47,18 +47,18 @@ object TreeExample extends Example("Tree") { DemoPanel("Tree with multiple selection")( //-- Begin: Tree with multiple selection Tree( - _.mode := ListMode.MultiSelect, + _.selectionMode := ListMode.Multiple, _.events.onSelectionChange .map(_.detail.selectedItems) --> Observer[List[TreeItem.Ref]](_.foreach(dom.console.log(_))), width := "100%", _.item( _.expanded := true, - _.text := "Tree 1", - _.icon := IconName.paste, + _.text := "Tree 1", + _.icon := IconName.paste, _.selected := true, _.item( _.expanded := true, - _.text := "Tree 1.1", + _.text := "Tree 1.1", _.selected := true, _.item(_.text := "Tree 1.1.1"), _.item(_.text := "Tree 1.1.2") @@ -74,7 +74,7 @@ object TreeExample extends Example("Tree") { ) ), _.item( - _.text := "Tree 3 (no icon)", + _.text := "Tree 3 (no icon)", _.expanded := true ) ) diff --git a/demo/src/main/scala/demo/UploadCollectionExample.scala b/demo/src/main/scala/demo/UploadCollectionExample.scala index f6d7352..4372653 100644 --- a/demo/src/main/scala/demo/UploadCollectionExample.scala +++ b/demo/src/main/scala/demo/UploadCollectionExample.scala @@ -31,14 +31,13 @@ object UploadCollectionExample extends Example("UploadCollection") { // from adding twice the same group of file in a row. (The glitch actually exists on their official docs) FileUploader( _.hideInput := true, - _.multiple := true, + _.multiple := true, Button(_.icon := IconName.add, _.design := ButtonDesign.Transparent), _.events.onChange.map(_.target.files.map(_ -> new js.Date())) --> newFilesArrivedObserver ) ), Button("Upload all", _.events.onClick.mapTo(()) --> uploadAllBus.writer) ), - _.mode := ListMode.Delete, _.events.onItemDelete.map(_.detail.item.dataset("index").toInt) --> allStagedFilesVar.updater[Int]( _.patch(_, Nil, 1) ), @@ -48,7 +47,8 @@ object UploadCollectionExample extends Example("UploadCollection") { ), children <-- allStagedFilesVar.signal.map(_.zipWithIndex.map { case ((file, selectedAt), index) => UploadCollection.item( - _.fileName := file.name, + _.hideDeleteButton := true, + _.fileName := file.name, _.fileNameClickable := true, s"Selected at: $selectedAt", dataAttr("index") := index.toString, @@ -77,7 +77,7 @@ object UploadCollectionExample extends Example("UploadCollection") { ) --> newFilesArrivedObserver, children <-- allStagedFilesVar.signal.map(_.zipWithIndex.map { case ((file, selectedAt), index) => UploadCollection.item( - _.fileName := file.name, + _.fileName := file.name, _.fileNameClickable := true, s"Selected at: $selectedAt", dataAttr("index") := index.toString, diff --git a/demo/src/main/scala/demo/ViewSettingsDialogExample.scala b/demo/src/main/scala/demo/ViewSettingsDialogExample.scala index 05c3899..3a48923 100644 --- a/demo/src/main/scala/demo/ViewSettingsDialogExample.scala +++ b/demo/src/main/scala/demo/ViewSettingsDialogExample.scala @@ -13,9 +13,9 @@ object ViewSettingsDialogExample extends Example("ViewSettingsDialog") { ): HtmlElement = div( MessageStrip( _.design := MessageStripDesign.Information, - "Using the ViewSettingsDialog is straightforward on paper as shown below. However, don't be fooled. You still" + - " need to process by hand whatever it spits out. Given it's dynamic nature, it's not as trivial as it " + - "may seem. (But perhaps adding some magic on top would make it more delightful to use.)" + "Using the ViewSettingsDialog is straightforward on paper as shown below. However, don't be fooled. You still" + + " need to process by hand whatever it spits out. Given it's dynamic nature, it's not as trivial as it " + + "may seem. (But perhaps adding some magic on top would make it more delightful to use.)" ), DemoPanel("Usage") { //-- Begin: Usage @@ -24,7 +24,7 @@ object ViewSettingsDialogExample extends Example("ViewSettingsDialog") { div( Button("Open ViewSettingsDialog", _.events.onClick.mapTo(()) --> showSettingsDialogBus.writer), ViewSettingsDialog( - _.showFromEvents(showSettingsDialogBus.events), + _.open <-- showSettingsDialogBus.events.mapTo(true), _.events.onCancel.map(_.detail) --> settingsBus.writer, _.events.onConfirm.map(_.detail) --> settingsBus.writer, _.slots.sortItems := List( @@ -35,11 +35,11 @@ object ViewSettingsDialogExample extends Example("ViewSettingsDialog") { ), _.slots.filterItems := List( FilterItem( - _.text := "Position", + _.text := "Position", _.slots.values := List("CTO", "CPO", "VP").map(position => FilterItem.option(_.text := position)) ), FilterItem( - _.text := "Department", + _.text := "Department", _.slots.values := List("Sales", "Management", "PR").map(position => FilterItem.option(_.text := position)) ), FilterItem( @@ -49,7 +49,7 @@ object ViewSettingsDialogExample extends Example("ViewSettingsDialog") { ) ), FilterItem( - _.text := "Report to", + _.text := "Report to", _.slots.values := List("CTO", "CPO", "VP").map(position => FilterItem.option(_.text := position)) ) ) diff --git a/demo/src/main/scala/demo/helpers/Example.scala b/demo/src/main/scala/demo/helpers/Example.scala index 6749a27..3730e3c 100644 --- a/demo/src/main/scala/demo/helpers/Example.scala +++ b/demo/src/main/scala/demo/helpers/Example.scala @@ -42,7 +42,7 @@ trait Example(val name: String) { def missing: HtmlElement = MessageStrip( s"$name is currently missing. Don't hesitate to contribue!", - _.design := MessageStripDesign.Negative, + _.design := MessageStripDesign.Negative, _.hideCloseButton := true ) @@ -57,12 +57,10 @@ trait Example(val name: String) { |""".stripMargin) def mtgImageWarning: HtmlElement = MessageStrip( - _.design := MessageStripDesign.Warning, + _.design := MessageStripDesign.Critical, "All images displayed on this page are the property of Wizard of the Coast." ) - - def someIconValues: List[IconName] = List( IconName.`clear-all`, IconName.`accidental-leave`, diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Badge.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Badge.scala deleted file mode 100644 index db4462a..0000000 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Badge.scala +++ /dev/null @@ -1,51 +0,0 @@ -package be.doeraene.webcomponents.ui5 - -import be.doeraene.webcomponents.ui5.configkeys.{ButtonDesign, ColourScheme, IconName} -import be.doeraene.webcomponents.ui5.internal.Slot -import com.raquo.laminar.codecs.{BooleanAsAttrPresenceCodec, StringAsIsCodec} -import com.raquo.laminar.api.L.* -import com.raquo.laminar.tags.CustomHtmlTag -import com.raquo.laminar.keys.HtmlAttr -import com.raquo.laminar.nodes.ReactiveHtmlElement -import org.scalajs.dom - -import scala.scalajs.js -import scala.scalajs.js.annotation.JSImport -import be.doeraene.webcomponents.WebComponent -import be.doeraene.webcomponents.ui5.configkeys.BadgeDesign - -/** The ui5-badge is a small non-interactive component which contains text information and color chosen from a list of - * predefined color schemes. It serves the purpose to attract the user attention to some piece of information (state, - * quantity, condition, etc.). - * - * @see - * the doc for more information. - */ -object Badge extends WebComponent { - - @js.native - trait RawElement extends js.Object {} - - @js.native - @JSImport("@ui5/webcomponents/dist/Badge.js", JSImport.Default) - object RawImport extends js.Object - - // object-s are lazy so you need to actually use them in your code to prevent dead code elimination - used(RawImport) - - type Ref = dom.html.Element & RawElement - - protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-badge") - - lazy val colourScheme: HtmlAttr[ColourScheme] = htmlAttr("color-scheme", ColourScheme.AsStringCodec) - lazy val design: HtmlAttr[BadgeDesign] = htmlAttr("design", BadgeDesign.AsStringCodec) - - object slots { - // note that unlike most elements that have an attribute Icon, this element has a slot icon instead. - // most of the time you will want to use a ui5-icon for this slot. - val icon: Slot = new Slot("icon") - } - - object events {} - -} diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Bar.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Bar.scala index cce7157..2ad1130 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Bar.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Bar.scala @@ -17,9 +17,6 @@ import be.doeraene.webcomponents.WebComponent * functionality is the basis for page headers and footers. The component consists of three areas to hold its content - * startContent slot, default slot and endContent slot. It has the capability to center content, such as a title, while * having other components on the left and right side. - * - * @see - * the doc for more information. */ object Bar extends WebComponent { @@ -27,7 +24,7 @@ object Bar extends WebComponent { trait RawElement extends js.Object {} @js.native - @JSImport("@ui5/webcomponents-fiori/dist/Bar.js", JSImport.Default) + @JSImport("@ui5/webcomponents/dist/Bar.js", JSImport.Default) object RawImport extends js.Object // object-s are lazy so you need to actually use them in your code to prevent dead code elimination diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/BarcodeScannerDialog.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/BarcodeScannerDialog.scala index 687bc5b..6a4a9c1 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/BarcodeScannerDialog.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/BarcodeScannerDialog.scala @@ -26,12 +26,21 @@ object BarcodeScannerDialog extends WebComponent { @js.native trait RawElement extends js.Object { - def close(): Unit = js.native - def show(): Unit = js.native - def open: Boolean = js.native } + object RawElement { + extension (rawElement: RawElement) { + @deprecated("The close method has been replaced by using the open property", since = "2.0.0") + def close(): Unit = + rawElement.asInstanceOf[js.Dynamic].updateDynamic("open")(false) + + @deprecated("The show method has been replaced by using the open property", since = "2.0.0") + def show(): Unit = + rawElement.asInstanceOf[js.Dynamic].updateDynamic("open")(true) + } + } + @js.native @JSImport("@ui5/webcomponents-fiori/dist/BarcodeScannerDialog.js", JSImport.Default) object RawImport extends js.Object @@ -65,16 +74,20 @@ object BarcodeScannerDialog extends WebComponent { } /** You can feed this [[Observer]] with a barcode scanner [[Ref]]s in order to close it. */ - val closeObserver: Observer[Ref] = Observer(_.close()) + @deprecated("The closeObserver has been replaced by using the open property", since = "2.0.0") + def closeObserver: Observer[Ref] = Observer(_.close()) /** Can be used as modifier to close the Barcode Scanner every time the stream emits. */ + @deprecated("The closeOnEvents has been replaced by using the open property", since = "2.0.0") def closeOnEvents(stream: EventStream[Unit]): Mod[ReactiveHtmlElement[Ref]] = inContext[ReactiveHtmlElement[Ref]](el => stream.mapTo(el.ref) --> closeObserver) /** You can feed this [[Observer]] with a barcode scanner [[Ref]]s in order to open it. */ + @deprecated("The showObserver has been replaced by using the open property", since = "2.0.0") val showObserver: Observer[Ref] = Observer(_.show()) /** Can be used as modifier to open the Barcode Scanner every time the stream emits. */ + @deprecated("The showOnEvents has been replaced by using the open property", since = "2.0.0") def showOnEvents(stream: EventStream[Unit]): Mod[ReactiveHtmlElement[Ref]] = inContext[ReactiveHtmlElement[Ref]](el => stream.mapTo(el.ref) --> showObserver) diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Breadcrumbs.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Breadcrumbs.scala index e7aeb1d..7a02f8d 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Breadcrumbs.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Breadcrumbs.scala @@ -44,8 +44,10 @@ object Breadcrumbs extends WebComponent with HasIcon { protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-breadcrumbs") - lazy val separatorStyle: HtmlAttr[BreadcrumbsSeparatorStyle] = - htmlAttr("separator-style", BreadcrumbsSeparatorStyle.AsStringCodec) + @deprecated("separatorStyle has been moved to separators", since = "2.0.0") + def separatorStyle: HtmlAttr[BreadcrumbsSeparatorStyle] = separators + + lazy val separators: HtmlAttr[BreadcrumbsSeparatorStyle] = BreadcrumbsSeparatorStyle.asHtmlAttr("separators") lazy val design: HtmlAttr[BreadcrumbsDesign] = htmlAttr("design", BreadcrumbsDesign.AsStringCodec) diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Button.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Button.scala index 4f14650..24e4592 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Button.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Button.scala @@ -41,11 +41,16 @@ object Button extends WebComponent with HasIcon { lazy val design: HtmlAttr[ButtonDesign] = htmlAttr("design", ButtonDesign.AsStringCodec) lazy val disabled: HtmlAttr[Boolean] = htmlAttr("disabled", BooleanAsAttrPresenceCodec) - lazy val iconEnd: HtmlAttr[Boolean] = htmlAttr("icon-end", BooleanAsAttrPresenceCodec) + lazy val endIcon: HtmlAttr[IconName] = htmlAttr("end-icon", IconName.AsStringCodec) lazy val iconOnly: HtmlAttr[Boolean] = htmlAttr("icon-only", BooleanAsAttrPresenceCodec) - lazy val submits: HtmlAttr[Boolean] = htmlAttrWithSupport("submits", BooleanAsAttrPresenceCodec)(SubmitsSupport) + lazy val submits: HtmlAttr[Boolean] = htmlAttr("submits", BooleanAsAttrPresenceCodec) lazy val tooltip: HtmlAttr[String] = htmlAttr("tooltip", StringAsIsCodec) - lazy val tpe: HtmlAttr[ButtonType] = htmlAttrWithSupport("type", ButtonType.AsStringCodec)(SubmitsSupport) + lazy val tpe: HtmlAttr[ButtonType] = htmlAttr("type", ButtonType.AsStringCodec) + + @scala.annotation.compileTimeOnly( + """iconEnd has been removed and replaced by the new endIcon mecanic. If you previously had `Button(_.icon := IconName.upload, _.iconEnd := true, "Upload")`, you now have to replace by `Button(_.endIcon := IconName.upload, "Upload")`""" + ) + def iconEnd: HtmlAttr[Boolean] = ??? object slots {} diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Calendar.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Calendar.scala index 7fbf4b5..b02e514 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Calendar.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Calendar.scala @@ -46,7 +46,7 @@ object Calendar extends WebComponent { lazy val hideWeekNumbers: HtmlAttr[Boolean] = htmlAttr("hide-week-numbers", BooleanAsAttrPresenceCodec) lazy val selectionMode: HtmlAttr[CalendarSelectionMode] = - htmlAttr("selection-mode", CalendarSelectionMode.AsStringCodec) + CalendarSelectionMode.asHtmlAttr("selection-mode") lazy val formatPattern: HtmlAttr[String] = htmlAttr("format-pattern", StringAsIsCodec) @@ -68,23 +68,31 @@ object Calendar extends WebComponent { object events { trait SelectedDatesChangeInfo extends js.Object { - @JSName("values") - def valuesJS: js.Array[String] + @JSName("selectedValues") + def selectedValuesJS: js.Array[String] - @JSName("dates") - def datesJS: js.Array[Long] + @JSName("selectedDates") + def selectedDatesJS: js.Array[Long] } object SelectedDatesChangeInfo { extension (info: SelectedDatesChangeInfo) - def values: List[String] = info.valuesJS.toList - def dates: List[Long] = info.datesJS.toList + @deprecated("values was renamed to selectedValues", since = "2.0.0") + def values: List[String] = info.selectedValues + @deprecated("values was renamed to selectedDates", since = "2.0.0") + def dates: List[Long] = info.selectedDates + + def selectedValues: List[String] = info.selectedValuesJS.toList + def selectedDates: List[Long] = info.selectedDatesJS.toList } - val onSelectedDatesChange: EventProp[EventWithPreciseTarget[Ref] & HasDetail[SelectedDatesChangeInfo]] = + val onSelectionChange: EventProp[EventWithPreciseTarget[Ref] & HasDetail[SelectedDatesChangeInfo]] = new EventProp( - "selected-dates-change" + "selection-change" ) + + @deprecated("onSelectedDatesChange has been renamed to onSelectionChange", since = "2.0.0") + def onSelectedDatesChange = onSelectionChange } def date: CalendarDate.type = CalendarDate diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CalendarDateRange.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CalendarDateRange.scala new file mode 100644 index 0000000..7a46ad3 --- /dev/null +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CalendarDateRange.scala @@ -0,0 +1,39 @@ +package be.doeraene.webcomponents.ui5 + +import be.doeraene.webcomponents.ui5.internal.Slot +import com.raquo.laminar.codecs.{BooleanAsAttrPresenceCodec, StringAsIsCodec} +import com.raquo.laminar.api.L.* +import com.raquo.laminar.tags.CustomHtmlTag +import com.raquo.laminar.keys.HtmlAttr +import com.raquo.laminar.nodes.ReactiveHtmlElement +import org.scalajs.dom + +import scala.scalajs.js +import scala.scalajs.js.annotation.{JSImport, JSName} +import be.doeraene.webcomponents.WebComponent + +/** The ui5-date component defines a calendar date to be used inside ui5-calendar + * + * @see + * the doc for more + * information. + */ +object CalendarDateRange extends WebComponent { + + @js.native + trait RawElement extends js.Object { + def value: String = js.native + } + + type Ref = dom.html.Element & RawElement + + protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-date-range") + + lazy val startValue = htmlAttr("start-value", StringAsIsCodec) + lazy val endValue = htmlAttr("end-value", StringAsIsCodec) + + object slots {} + + object events {} + +} diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CardHeader.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CardHeader.scala index 6441e3f..9eb78cc 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CardHeader.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CardHeader.scala @@ -14,9 +14,6 @@ import scala.scalajs.js.annotation.JSImport import be.doeraene.webcomponents.WebComponent /** The ui5-card-header is a component, meant to be used as a header of the ui5-card component. - * - * @see - * the doc for more information. */ object CardHeader extends WebComponent { @@ -36,12 +33,15 @@ object CardHeader extends WebComponent { lazy val interactive: HtmlAttr[Boolean] = htmlAttr("interactive", BooleanAsAttrPresenceCodec) - lazy val status: HtmlAttr[String] = htmlAttr("status", StringAsIsCodec) + lazy val additionalText: HtmlAttr[String] = htmlAttr("additional-text", StringAsIsCodec) lazy val subtitleText: HtmlAttr[String] = htmlAttr("subtitle-text", StringAsIsCodec) lazy val titleText: HtmlAttr[String] = htmlAttr("title-text", StringAsIsCodec) + @deprecated("status has been renamed to additionalText", since = "2.0.0") + def status: HtmlAttr[String] = additionalText + object slots { val action: Slot = new Slot("action") diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Carousel.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Carousel.scala index 3922216..8003221 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Carousel.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Carousel.scala @@ -13,7 +13,8 @@ import org.scalajs.dom import scala.scalajs.js import scala.scalajs.js.annotation.JSImport import be.doeraene.webcomponents.WebComponent -import be.doeraene.webcomponents.ui5.configkeys.CarouselPageIndicatorStyle +import be.doeraene.webcomponents.ui5.configkeys.CarouselPageIndicatorType +import com.raquo.laminar.codecs.Codec /** The Carousel allows the user to browse through a set of items. The component is mostly used for showing a gallery of * images, but can hold any other HTML element. @@ -57,12 +58,28 @@ object Carousel extends WebComponent { lazy val hidePageIndicator: HtmlAttr[Boolean] = htmlAttr("hide-page-indicator", BooleanAsAttrPresenceCodec) - lazy val itemsPerPageL: HtmlAttr[Int] = htmlAttr("items-per-page-l", IntAsStringCodec) - lazy val itemsPerPageM: HtmlAttr[Int] = htmlAttr("items-per-page-m", IntAsStringCodec) - lazy val itemsPerPageS: HtmlAttr[Int] = htmlAttr("items-per-page-s", IntAsStringCodec) + case class ItemsPerPage(small: Int, medium: Int, large: Int, extraLarge: Int) - lazy val pageIndicatorStyle: HtmlAttr[CarouselPageIndicatorStyle] = - htmlAttr("page-indicator-style", CarouselPageIndicatorStyle.AsStringCodec) + object ItemsPerPageAsStringCodec extends Codec[ItemsPerPage, String] { + def decode(domValue: String): ItemsPerPage = ??? + + def encode(v: ItemsPerPage): String = s"S${v.small} M${v.medium} L${v.large} XL${v.extraLarge}" + } + + lazy val itemsPerPage: HtmlAttr[ItemsPerPage] = htmlAttr("items-per-page", ItemsPerPageAsStringCodec) + + @scala.annotation.compileTimeOnly("Items per page are now managed through the unique itemsPerPage key") + def itemsPerPageL: HtmlAttr[Int] = ??? + @scala.annotation.compileTimeOnly("Items per page are now managed through the unique itemsPerPage key") + def itemsPerPageM: HtmlAttr[Int] = ??? + @scala.annotation.compileTimeOnly("Items per page are now managed through the unique itemsPerPage key") + def itemsPerPageS: HtmlAttr[Int] = ??? + + lazy val pageIndicatorType: HtmlAttr[CarouselPageIndicatorType] = + CarouselPageIndicatorType.asHtmlAttr("page-indicator-type") + + @deprecated("pageIndicatorStyle has been renamed to pageIndicatorType", since = "2.0.0") + def pageIndicatorStyle: HtmlAttr[CarouselPageIndicatorType] = pageIndicatorType object slots {} diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CheckBox.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CheckBox.scala index b178cf1..ae70740 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CheckBox.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CheckBox.scala @@ -44,9 +44,9 @@ object CheckBox extends WebComponent with HasIcon with HasAccessibleName with Ha lazy val readonly: HtmlAttr[Boolean] = htmlAttr("readonly", BooleanAsAttrPresenceCodec) lazy val required: HtmlAttr[Boolean] = htmlAttr("required", BooleanAsAttrPresenceCodec) - lazy val valueState: HtmlAttr[ValueState] = htmlAttr("value-state", ValueState.AsStringCodec) + lazy val valueState: HtmlAttr[ValueState] = ValueState.asHtmlAttr("value-state") - lazy val wrappingType: HtmlAttr[WrappingType] = htmlAttr("wrapping-type", WrappingType.AsStringCodec) + lazy val wrappingType: HtmlAttr[WrappingType] = WrappingType.asHtmlAttr("wrapping-type") object slots {} diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ColourPalettePopover.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ColourPalettePopover.scala index da6344a..2072fdb 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ColourPalettePopover.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ColourPalettePopover.scala @@ -31,7 +31,18 @@ object ColourPalettePopover extends WebComponent { //noinspection ScalaUnusedSymbol @js.native trait RawElement extends js.Object { - def showAt(opener: dom.HTMLElement): Unit = js.native + var open: Boolean = js.native + var opener: String = js.native + } + + object RawElement { + extension (elem: RawElement) { + + @scala.annotation.compileTimeOnly( + "showAt method has been removed, and replaced by using the open and openerId mecanic" + ) + def showAt(opener: dom.HTMLElement): Unit = ??? + } } @js.native @@ -81,10 +92,30 @@ object ColourPalettePopover extends WebComponent { Option(dom.document.getElementById(id)).map(_.asInstanceOf[Ref]) /** [[Observer]] you can feed a popover ref and a [[dom.HTMLElement]] to open the popover at the element. */ - val showAtObserver: Observer[(Ref, dom.HTMLElement)] = Observer(_.showAt(_)) + @scala.annotation.compileTimeOnly( + "showAtObserver was replaced in 2.0.0 by showAtObserverId, which requires you to give the element id" + ) + def showAtObserver: Observer[(Ref, dom.HTMLElement)] = ??? + + /** [[Observer]] you can feed a popover ref and the id of a [[dom.HTMLElement]] to open the popover at the element. */ + val showAtObserverId: Observer[(Ref, String)] = + Observer { (ref, openerId) => + ref.opener = openerId + scala.scalajs.js.timers.setTimeout(0) { + ref.open = true + } + } /** [[Mod]] for [[ColourPalettePopover]]s opening them each time the stream emits an opener [[dom.HTMLElement]] */ - def showAtFromEvents(openerEvents: EventStream[dom.HTMLElement]): Mod[ReactiveHtmlElement[Ref]] = - inContext[ReactiveHtmlElement[Ref]](el => openerEvents.map(el.ref -> _) --> showAtObserver) + @scala.annotation.compileTimeOnly( + "showAtFromEvents was replaced in 2.0.0 by showAtOpenerIdFromEvents, which requires you to give the element id" + ) + def showAtFromEvents(openerEvents: EventStream[dom.HTMLElement]): Mod[ReactiveHtmlElement[Ref]] = ??? + + /** [[Mod]] for [[ColourPalettePopover]]s opening them each time the stream emits an opener [[dom.HTMLElement]] with + * the id specified by the stream + */ + def showAtOpenerIdFromEvents(openerEvents: EventStream[String]): Mod[ReactiveHtmlElement[Ref]] = + inContext[ReactiveHtmlElement[Ref]](el => openerEvents.map(el.ref -> _) --> showAtObserverId) } diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ColourPicker.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ColourPicker.scala index f4ec813..094e98e 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ColourPicker.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ColourPicker.scala @@ -27,14 +27,23 @@ object ColourPicker extends WebComponent { @js.native trait RawElement extends js.Object { - @JSName("color") - def colourJS: String = js.native + + @JSName("value") + def valueJS: String = js.native } object RawElement { extension (rawElement: RawElement) + @deprecated("color attribute has been renamed to value", since = "2.0.0") + def colourJS: String = rawElement.valueJS + + /** The current colour as [[Colour]] instance. English UK spelling for consistency. */ + @deprecated("colour attribute has been renamed to value", since = "2.0.0") + def colour: Colour = rawElement.value + /** The current colour as [[Colour]] instance. English UK spelling for consistency. */ - def colour: Colour = Colour.fromString(rawElement.colourJS) + def value: Colour = Colour.fromString(rawElement.valueJS) + } @js.native @@ -48,7 +57,10 @@ object ColourPicker extends WebComponent { protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-color-picker") - lazy val colour: HtmlAttr[Colour] = htmlAttr("color", Colour.AsStringCodec) + @deprecated("colour attribute has been renamed to value", since = "2.0.0") + def colour: HtmlAttr[Colour] = value + + lazy val value: HtmlAttr[Colour] = htmlAttr("value", Colour.AsStringCodec) object slots {} diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ComboBoxGroupItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ComboBoxGroupItem.scala index 4719563..c592244 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ComboBoxGroupItem.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ComboBoxGroupItem.scala @@ -20,16 +20,23 @@ import be.doeraene.webcomponents.WebComponent * the doc for more * information. */ -object ComboBoxGroupItem extends WebComponent with HasText { +object ComboBoxGroupItem extends WebComponent { @js.native trait RawElement extends js.Object { - def text: String = js.native + def headerText: String = js.native def additionalText: String = js.native } + object RawElement { + extension (rawElement: RawElement) { + @deprecated("text property of ComboBoxGroupItem has been renamed to headerText", since = "2.0.0") + def text: String = rawElement.headerText + } + } + @js.native - @JSImport("@ui5/webcomponents/dist/ComboBoxGroupItem.js", JSImport.Default) + @JSImport("@ui5/webcomponents/dist/ComboBoxItemGroup.js", JSImport.Default) object RawImport extends js.Object // object-s are lazy so you need to actually use them in your code to prevent dead code elimination @@ -37,10 +44,17 @@ object ComboBoxGroupItem extends WebComponent with HasText { type Ref = dom.html.Element & RawElement - protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-cb-group-item") + protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-cb-item-group") + + lazy val headerText: HtmlAttr[String] = htmlAttr("header-text", StringAsIsCodec) + + @deprecated("text property of ComboBoxGroupItem has been renamed to headerText", since = "2.0.0") + def text = headerText object slots {} object events {} + def item: ComboBoxItem.type = ComboBoxItem + } diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CustomListItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CustomListItem.scala index 89eaaab..d084732 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CustomListItem.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CustomListItem.scala @@ -28,7 +28,7 @@ object CustomListItem extends WebComponent { trait RawElement extends js.Object {} @js.native - @JSImport("@ui5/webcomponents/dist/CustomListItem.js", JSImport.Default) + @JSImport("@ui5/webcomponents/dist/ListItemCustom.js", JSImport.Default) object RawImport extends js.Object // object-s are lazy so you need to actually use them in your code to prevent dead code elimination diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DatePicker.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DatePicker.scala index 888ee55..3afca26 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DatePicker.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DatePicker.scala @@ -30,21 +30,34 @@ object DatePicker extends WebComponent with HasAccessibleName with HasName with trait RawElement extends js.Object { def dateValue: js.Date = js.native + def open: Boolean = js.native + var value: String = js.native + @scala.annotation.compileTimeOnly( + "The methods openPicker(), closePicker() and isOpen() are replaced by open property." + ) def closePicker(): Unit = js.native def formatValue(date: js.Date): String = js.native def isInValidRange(input: String): Boolean = js.native - def isOpen(): Boolean = js.native - def isValid(value: String): Boolean = js.native + @scala.annotation.compileTimeOnly( + "The methods openPicker(), closePicker() and isOpen() are replaced by open property." + ) def openPicker(): Unit = js.native } + object RawElement { + extension (rawElement: RawElement) { + @deprecated("The methods openPicker(), closePicker() and isOpen() are replaced by open property.") + def isOpen(): Boolean = rawElement.open + } + } + @js.native @JSImport("@ui5/webcomponents/dist/DatePicker.js", JSImport.Default) object RawImport extends js.Object @@ -77,6 +90,8 @@ object DatePicker extends WebComponent with HasAccessibleName with HasName with lazy val maxDateStr: HtmlAttr[String] = htmlAttr("max-date", StringAsIsCodec) lazy val minDateStr: HtmlAttr[String] = htmlAttr("min-date", StringAsIsCodec) + lazy val open: HtmlAttr[Boolean] = htmlAttr("open", BooleanAsAttrPresenceCodec) + lazy val primaryCalendarType: HtmlAttr[CalendarType] = htmlAttr("primary-calendar-type", CalendarType.AsStringCodec) diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DateRangePicker.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DateRangePicker.scala index 45c67ac..1272892 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DateRangePicker.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DateRangePicker.scala @@ -26,25 +26,38 @@ object DateRangePicker extends WebComponent with HasAccessibleName with HasName @js.native trait RawElement extends js.Object { + def open: Boolean = js.native + @JSName("endDateValue") def endDateValueJS: js.Date = js.native @JSName("startDateValue") def startDateValueJS: js.Date = js.native + @scala.annotation.compileTimeOnly( + "The methods openPicker(), closePicker() and isOpen() are replaced by open property." + ) def closePicker(): Unit = js.native def formatValue(date: js.Date): String = js.native def isInValidRange(value: String): Boolean = js.native - def isOpen(): Boolean = js.native - def isValid(value: String): Boolean = js.native + @scala.annotation.compileTimeOnly( + "The methods openPicker(), closePicker() and isOpen() are replaced by open property." + ) def openPicker(): Unit = js.native } + object RawElement { + extension (rawElement: RawElement) { + @deprecated("The methods openPicker(), closePicker() and isOpen() are replaced by open property.") + def isOpen(): Boolean = rawElement.open + } + } + @js.native @JSImport("@ui5/webcomponents/dist/DateRangePicker.js", JSImport.Default) object RawImport extends js.Object @@ -56,6 +69,8 @@ object DateRangePicker extends WebComponent with HasAccessibleName with HasName protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-daterange-picker") + lazy val open: HtmlAttr[Boolean] = htmlAttr("open", BooleanAsAttrPresenceCodec) + lazy val delimiter: HtmlAttr[String] = htmlAttr("delimiter", StringAsIsCodec) lazy val disabled: HtmlAttr[Boolean] = htmlAttr("disabled", BooleanAsAttrPresenceCodec) @@ -92,18 +107,22 @@ object DateRangePicker extends WebComponent with HasAccessibleName with HasName val onInput = new EventProp[EventWithPreciseTarget[Ref] & HasDetail[DateEventData]]("input") } - /** You can feed [[DateRangePicker]] refs to this observer in order to close them. */ - val closePickerObserver: Observer[Ref] = Observer(_.closePicker()) + /** You can feed [[DateTimePicker]] refs to this observer in order to close them. */ + @deprecated("closePickerObserver has been deprecated in favour of using the open property", since = "2.0.0") + def closePickerObserver: Observer[Ref] = Observer(ref => ref.asInstanceOf[js.Dynamic].updateDynamic("open")(false)) - /** creates a [[Mod]] for your [[DateRangePicker]]s to close them when the stream emit. */ + /** creates a [[Mod]] for your [[DateTimePicker]]s to close them when the stream emit. */ + @deprecated("closePickerFromEvents has been deprecated in favour of using the open property", since = "2.0.0") def closePickerFromEvents(stream: EventStream[Unit]) = - inContext[ReactiveHtmlElement[Ref]](el => stream.mapTo(el.ref) --> closePickerObserver) + open <-- stream.mapTo(false) - /** You can feed [[DateRangePicker]] refs to this observer in order to open them. */ - val openPickerObserver: Observer[Ref] = Observer(_.openPicker()) + /** You can feed [[DateTimePicker]] refs to this observer in order to open them. */ + @deprecated("openPickerObserver has been deprecated in favour of using the open property", since = "2.0.0") + def openPickerObserver: Observer[Ref] = Observer(ref => ref.asInstanceOf[js.Dynamic].updateDynamic("open")(true)) - /** creates a [[Mod]] for your [[DateRangePicker]]s to close them when the stream emit. */ + /** creates a [[Mod]] for your [[DateTimePicker]]s to close them when the stream emit. */ + @deprecated("openPickerFromEvents has been deprecated in favour of using the open property", since = "2.0.0") def openPickerFromEvents(stream: EventStream[Unit]) = - inContext[ReactiveHtmlElement[Ref]](el => stream.mapTo(el.ref) --> openPickerObserver) + open <-- stream.mapTo(true) } diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DateTimePicker.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DateTimePicker.scala index cd24482..aa9c143 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DateTimePicker.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DateTimePicker.scala @@ -17,10 +17,6 @@ import be.doeraene.webcomponents.WebComponent /** The DateTimePicker component alows users to select both date (day, month and year) and time (hours, minutes and * seconds) and for the purpose it consists of input field and Date/Time picker. - * - * @see - * the doc for more - * information. */ object DateTimePicker extends WebComponent with HasAccessibleName with HasName with HasValue { @@ -29,19 +25,32 @@ object DateTimePicker extends WebComponent with HasAccessibleName with HasName w @JSName("dateValue") def dateValueJS: js.Date = js.native + def open: Boolean = js.native + + @scala.annotation.compileTimeOnly( + "The methods openPicker(), closePicker() and isOpen() are replaced by open property." + ) def closePicker(): Unit = js.native def formatValue(date: js.Date): String = js.native def isInValidRange(value: String): Boolean = js.native - def isOpen(): Boolean = js.native - def isValid(value: String): Boolean = js.native + @scala.annotation.compileTimeOnly( + "The methods openPicker(), closePicker() and isOpen() are replaced by open property." + ) def openPicker(): Unit = js.native } + object RawElement { + extension (rawElement: RawElement) { + @deprecated("The methods openPicker(), closePicker() and isOpen() are replaced by open property.") + def isOpen(): Boolean = rawElement.open + } + } + @js.native @JSImport("@ui5/webcomponents/dist/DateTimePicker.js", JSImport.Default) object RawImport extends js.Object @@ -63,6 +72,7 @@ object DateTimePicker extends WebComponent with HasAccessibleName with HasName w lazy val formatPattern: HtmlAttr[String] = htmlAttr("format-pattern", StringAsIsCodec) lazy val maxDateRaw: HtmlAttr[String] = htmlAttr("max-date", StringAsIsCodec) lazy val minDateRaw: HtmlAttr[String] = htmlAttr("min-date", StringAsIsCodec) + lazy val open: HtmlAttr[Boolean] = htmlAttr("open", BooleanAsAttrPresenceCodec) lazy val primaryCalendarType: HtmlAttr[CalendarType] = htmlAttr("primary-calendar-type", CalendarType.AsStringCodec) @@ -81,17 +91,21 @@ object DateTimePicker extends WebComponent with HasAccessibleName with HasName w } /** You can feed [[DateTimePicker]] refs to this observer in order to close them. */ - val closePickerObserver: Observer[Ref] = Observer(_.closePicker()) + @deprecated("closePickerObserver has been deprecated in favour of using the open property", since = "2.0.0") + def closePickerObserver: Observer[Ref] = Observer(ref => ref.asInstanceOf[js.Dynamic].updateDynamic("open")(false)) /** creates a [[Mod]] for your [[DateTimePicker]]s to close them when the stream emit. */ + @deprecated("closePickerFromEvents has been deprecated in favour of using the open property", since = "2.0.0") def closePickerFromEvents(stream: EventStream[Unit]) = - inContext[ReactiveHtmlElement[Ref]](el => stream.mapTo(el.ref) --> closePickerObserver) + open <-- stream.mapTo(false) /** You can feed [[DateTimePicker]] refs to this observer in order to open them. */ - val openPickerObserver: Observer[Ref] = Observer(_.openPicker()) + @deprecated("openPickerObserver has been deprecated in favour of using the open property", since = "2.0.0") + def openPickerObserver: Observer[Ref] = Observer(ref => ref.asInstanceOf[js.Dynamic].updateDynamic("open")(true)) /** creates a [[Mod]] for your [[DateTimePicker]]s to close them when the stream emit. */ + @deprecated("openPickerFromEvents has been deprecated in favour of using the open property", since = "2.0.0") def openPickerFromEvents(stream: EventStream[Unit]) = - inContext[ReactiveHtmlElement[Ref]](el => stream.mapTo(el.ref) --> openPickerObserver) + open <-- stream.mapTo(true) } diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Dialog.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Dialog.scala index 380d3c7..0e31960 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Dialog.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Dialog.scala @@ -12,6 +12,7 @@ import org.scalajs.dom import scala.scalajs.js import scala.scalajs.js.annotation.JSImport import be.doeraene.webcomponents.WebComponent +import be.doeraene.webcomponents.ui5.eventtypes.EventWithPreciseTarget /** The ui5-dialog component is used to temporarily display some information in a size-limited window in front of the * regular app screen. @@ -23,13 +24,28 @@ object Dialog extends WebComponent { @js.native trait RawElement extends js.Object { - def show(): Unit = js.native + def open: Boolean = js.native def applyFocus(): Unit = js.native + } - def close(): Unit = js.native - - def isOpen(): Boolean = js.native + object RawElement { + extension (rawElement: RawElement) { + @deprecated( + "The show and close public methods have been removed. Use the public property open instead.", + since = "2.0.0" + ) + def show(): Unit = rawElement.asInstanceOf[js.Dynamic].updateDynamic("open")(true) + + @deprecated( + "The show and close public methods have been removed. Use the public property open instead.", + since = "2.0.0" + ) + def close(): Unit = rawElement.asInstanceOf[js.Dynamic].updateDynamic("open")(false) + + @deprecated("The isOpen method has been removed. Use the public property open instead.", since = "2.0.0") + def isOpen(): Boolean = rawElement.open + } } @js.native @@ -60,20 +76,33 @@ object Dialog extends WebComponent { val header: Slot = new Slot("header") } + object events { + lazy val onOpen: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("open") + lazy val onClose: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("close") + } + def getDialogById(id: String): Option[Ref] = Option(dom.document.getElementById(id)).map(_.asInstanceOf[Ref]) /** [[Observer]] you can feed to open the Dialog. */ - val showObserver: Observer[Ref] = Observer(_.show()) + @deprecated( + "The show and close public methods have been removed. Use the public property open instead.", + since = "2.0.0" + ) + def showObserver: Observer[Ref] = Observer(_.show()) def showFromEvents(openerEvents: EventStream[Unit]): Mod[ReactiveHtmlElement[Ref]] = - inContext[ReactiveHtmlElement[Ref]](el => openerEvents.mapTo(el.ref) --> showObserver) + open <-- openerEvents.mapTo(true) /** [[Observer]] you can feed a [[Dialog]] ref to close it. */ - val closeObserver: Observer[Ref] = Observer(_.close()) + @deprecated( + "The show and close public methods have been removed. Use the public property open instead.", + since = "2.0.0" + ) + def closeObserver: Observer[Ref] = Observer(_.close()) def closeFromEvents(closeEvents: EventStream[Unit]): Mod[ReactiveHtmlElement[Ref]] = - inContext[ReactiveHtmlElement[Ref]](el => closeEvents.mapTo(el.ref) --> closeObserver) + open <-- closeEvents.mapTo(false) /** [[Observer]] you can feed a [[Dialog]] ref to apply focus to it. */ val applyFocusObserver: Observer[Ref] = Observer(_.applyFocus()) diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/FlexibleColumnLayout.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/FlexibleColumnLayout.scala index 3427ac8..7d6de0c 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/FlexibleColumnLayout.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/FlexibleColumnLayout.scala @@ -12,13 +12,11 @@ import org.scalajs.dom import scala.scalajs.js import scala.scalajs.js.annotation.JSImport import be.doeraene.webcomponents.WebComponent +import be.doeraene.webcomponents.ui5.eventtypes.{EventWithPreciseTarget, HasDetail} -/** The FlexibleColumnLayout implements the master-detail-detail paradigm by displaying up to three pages in separate - * columns. - * - * @see - * the doc for - * more information. +/** The FlexibleColumnLayout implements the list-detail-detail paradigm by displaying up to three pages in separate + * columns. There are several possible layouts that can be changed either with the component API, or by dragging the + * column separators. */ object FlexibleColumnLayout extends WebComponent { @@ -28,7 +26,7 @@ object FlexibleColumnLayout extends WebComponent { def endColumnVisible: Boolean = js.native - def hideArrows: Boolean = js.native + def disableResizing: Boolean = js.native def layout: FCLLayout.StringFCLLayout = js.native @@ -40,7 +38,12 @@ object FlexibleColumnLayout extends WebComponent { } object RawElement { - extension (element: RawElement) def layoutADT: FCLLayout = FCLLayout.AsStringCodec.decode(element.layout) + extension (element: RawElement) { + def layoutADT: FCLLayout = FCLLayout.AsStringCodec.decode(element.layout) + + @deprecated("hideArrows property has been renamed to disableResizing", since = "2.0.0") + def hideArrows: Boolean = element.disableResizing + } } @js.native @@ -54,11 +57,25 @@ object FlexibleColumnLayout extends WebComponent { protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-flexible-column-layout") - lazy val hideArrows: HtmlAttr[Boolean] = htmlAttr("hide-arrows", BooleanAsAttrPresenceCodec) + lazy val disableResizing: HtmlAttr[Boolean] = htmlAttr("disable-resizing", BooleanAsAttrPresenceCodec) lazy val layout: HtmlAttr[FCLLayout] = htmlAttr("layout", FCLLayout.AsStringCodec) - val onLayoutChanged = new EventProp[dom.Event]("layout-change") + @deprecated("hideArrows property has been renamed to disableResizing", since = "2.0.0") + def hideArrows: HtmlAttr[Boolean] = disableResizing + + @deprecated("onLayoutChanged has been moved within the events object") + def onLayoutChanged = events.onLayoutChanged + + object events { + trait LayoutChangedDetail extends js.Object { + def separatorsUsed: Boolean + + def resized: Boolean + } + + val onLayoutChanged = new EventProp[EventWithPreciseTarget[Ref] & HasDetail[LayoutChangedDetail]]("layout-change") + } object slots { val endColumn: Slot = new Slot("endColumn") diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Icon.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Icon.scala index 58955cf..60de39f 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Icon.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Icon.scala @@ -13,6 +13,7 @@ import scala.scalajs.js import scala.scalajs.js.annotation.JSImport import be.doeraene.webcomponents.WebComponent import be.doeraene.webcomponents.ui5.configkeys.IconDesign +import be.doeraene.webcomponents.ui5.configkeys.IconMode /** The ui5-icon component represents an SVG icon. There are two main scenarios how the ui5-icon component is used: as a * purely decorative element; or as a visually appealing clickable area in the form of an icon button. @@ -37,9 +38,12 @@ object Icon extends WebComponent with HasAccessibleName { protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-icon") lazy val name: HtmlAttr[IconName] = htmlAttr("name", IconName.AsStringCodec) + lazy val mode: HtmlAttr[IconMode] = IconMode.asHtmlAttr("mode") - lazy val interactive: HtmlAttr[Boolean] = - htmlAttr("interactive", BooleanAsAttrPresenceCodec) + @scala.annotation.compileTimeOnly( + "The properties interactive and accessibleRole have been removed and replaced by property mode with the following values. Interactive: the icon will have role='button' and focus and press handling to enhance interactivity." + ) + def interactive: HtmlAttr[Boolean] = ??? lazy val showTooltip: HtmlAttr[Boolean] = htmlAttr("show-tooltip", BooleanAsAttrPresenceCodec) diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/IllustratedMessage.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/IllustratedMessage.scala index 442c089..fd9ab7b 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/IllustratedMessage.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/IllustratedMessage.scala @@ -46,11 +46,16 @@ object IllustratedMessage extends WebComponent with HasIcon { htmlAttr("name", IllustratedMessageType.AsStringCodec) /** Alternative to "name" for Scala 2.13 users. */ - lazy val nameStr: HtmlAttr[String] = htmlAttr("name", StringAsIsCodec) - lazy val size: HtmlAttr[IllustratedMessageSize] = IllustratedMessageSize.asHtmlAttr("size") - lazy val subtitleText: HtmlAttr[String] = htmlAttr("subtitle-text", StringAsIsCodec) - lazy val titleText: HtmlAttr[String] = htmlAttr("title-text", StringAsIsCodec) - lazy val titleLevel: HtmlAttr[TitleLevel] = TitleLevel.asHtmlAttr("title-level") + lazy val nameStr: HtmlAttr[String] = htmlAttr("name", StringAsIsCodec) + lazy val design: HtmlAttr[IllustratedMessageSize] = IllustratedMessageSize.asHtmlAttr("design") + lazy val subtitleText: HtmlAttr[String] = htmlAttr("subtitle-text", StringAsIsCodec) + lazy val titleText: HtmlAttr[String] = htmlAttr("title-text", StringAsIsCodec) + + @scala.annotation.compileTimeOnly("The titleLevel property has been removed and replaced by using the title slot") + def titleLevel: HtmlAttr[TitleLevel] = ??? + + @deprecated("size property of IllustratedMessage has been renamed to design") + def size: HtmlAttr[IllustratedMessageSize] = design object slots { val subtitle: Slot = new Slot("subtitle") diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Input.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Input.scala index 7855d41..4e5c1f9 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Input.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Input.scala @@ -27,8 +27,13 @@ object Input extends WebComponent with HasValue with HasAccessibleName { @js.native trait RawElement extends js.Object { def value: String = js.native + } - def openPicker(): Unit = js.native + object RawElement { + extension (rawElement: RawElement) { + @deprecated("openPicker method has been removed. Use the public member 'open' instead", since = "2.0.0") + def openPicker(): Unit = rawElement.asInstanceOf[js.Dynamic].updateDynamic("open")(true) + } } @js.native @@ -58,6 +63,8 @@ object Input extends WebComponent with HasValue with HasAccessibleName { lazy val showClearIcon: HtmlAttr[Boolean] = htmlAttr("show-clear-icon", BooleanAsAttrPresenceCodec) lazy val showSuggestions: HtmlAttr[Boolean] = htmlAttr("show-suggestions", BooleanAsAttrPresenceCodec) + lazy val open: HtmlAttr[Boolean] = htmlAttr("open", BooleanAsAttrPresenceCodec) + object slots { val valueStateMessage: Slot = new Slot("valueStateMessage") @@ -69,12 +76,17 @@ object Input extends WebComponent with HasValue with HasAccessibleName { val onChange: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("change") val onInput: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("input") - val onSuggestionItemPreview = - new EventProp[dom.Event & HasDetail[HasTargetRef[dom.HTMLElement] & HasItem[SuggestionItem.RawElement]]]( - "suggestion-item-preview" - ) - val onSuggestionItemSelect = - new EventProp[dom.Event & HasDetail[HasItem[SuggestionItem.RawElement]]]("suggestion-item-select") + val onSelectionChange: EventProp[ + EventWithPreciseTarget[Ref] & + HasDetail[HasTargetRef[dom.HTMLElement] & HasItem[js.UndefOr[SuggestionItem.RawElement]]] + ] = new EventProp("selection-change") + + @deprecated("onSuggestionItemPreview has been changed to onSelectionChange", since = "2.0.0") + def onSuggestionItemPreview = onSelectionChange + + @scala.annotation.compileTimeOnly("onSuggestionItemSelect has been removed. Used onSelectionChange instead.") + def onSuggestionItemSelect: EventProp[EventWithPreciseTarget[Ref] & HasDetail[HasItem[SuggestionItem.RawElement]]] = + ??? } def suggestion: SuggestionItem.type = SuggestionItem diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Link.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Link.scala index 4f46b8f..a2276ae 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Link.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Link.scala @@ -14,10 +14,9 @@ import be.doeraene.webcomponents.ui5.configkeys.WrappingType import be.doeraene.webcomponents.ui5.eventtypes.EventWithPreciseTarget import be.doeraene.webcomponents.WebComponent -/** A link to another page. - * - * @see - * the doc for more information. +/** The ui5-link is a hyperlink component that is used to navigate to other apps and web pages, or to trigger actions. + * It is a clickable text element, visualized in such a way that it stands out from the standard text. On hover, it + * changes its style to an underlined text to provide additional feedback to the user. */ object Link extends WebComponent with HasIcon with HasAccessibleName { diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ListItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ListItem.scala index f72b855..ec32b1a 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ListItem.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ListItem.scala @@ -25,7 +25,7 @@ object ListItem extends WebComponent with HasIcon with HasDescription with HasAd trait RawElement extends js.Object {} @js.native - @JSImport("@ui5/webcomponents/dist/StandardListItem.js", JSImport.Default) + @JSImport("@ui5/webcomponents/dist/ListItemStandard.js", JSImport.Default) object RawImport extends js.Object // object-s are lazy so you need to actually use them in your code to prevent dead code elimination @@ -39,15 +39,19 @@ object ListItem extends WebComponent with HasIcon with HasDescription with HasAd htmlAttr("additional-text-state", ValueState.AsStringCodec) lazy val iconEnd: HtmlAttr[Boolean] = htmlAttr("icon-end", BooleanAsAttrPresenceCodec) - lazy val image: HtmlAttr[String] = htmlAttr("image", StringAsIsCodec) lazy val navigated: HtmlAttr[Boolean] = htmlAttr("navigated", BooleanAsAttrPresenceCodec) - lazy val tpe: HtmlAttr[ListItemType] = htmlAttr("type", ListItemType.AsStringCodec) + lazy val tpe: HtmlAttr[ListItemType] = ListItemType.asHtmlAttr("type") lazy val selected: HtmlAttr[Boolean] = htmlAttr("selected", BooleanAsAttrPresenceCodec) lazy val highlight: HtmlAttr[ValueState] = ValueState.asHtmlAttr("highlight") + @scala.annotation.compileTimeOnly("The image property has been replaced by the image slot.") + def image: HtmlAttr[String] = ??? + object slots { val deleteButton: Slot = Slot("deleteButton") - val imageContent: Slot = Slot("imageContent") + val image: Slot = Slot("image") + + def imageContent: Slot = image } object events {} diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Menu.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Menu.scala index c0d29d7..45e37e6 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Menu.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Menu.scala @@ -13,20 +13,30 @@ import scala.scalajs.js.annotation.JSImport import be.doeraene.webcomponents.WebComponent import scala.concurrent.duration.FiniteDuration +import be.doeraene.webcomponents.ui5.eventtypes.EventWithPreciseTarget -/** Simple UI button - * - * @see - * the doc for more information. +/** ui5-menu component represents a hierarchical menu structure. */ object Menu extends WebComponent { //noinspection ScalaUnusedSymbol @js.native - trait RawElement extends js.Object { - def close(): Unit = js.native - - def showAt(opener: dom.HTMLElement): Unit = js.native + trait RawElement extends js.Object {} + + object RawElement { + extension (rawElement: RawElement) { + @deprecated("close method is replaced by using the open property", since = "2.0.0") + def close(): Unit = + rawElement.asInstanceOf[js.Dynamic].updateDynamic("open")(false) + + @deprecated("showAt method is replaced by using the open and opener property", since = "2.0.0") + def showAt(opener: dom.HTMLElement): Unit = { + rawElement.asInstanceOf[js.Dynamic].updateDynamic("opener")(opener) + scala.scalajs.js.timers.setTimeout(0) { + rawElement.asInstanceOf[js.Dynamic].updateDynamic("open")(true) + } + } + } } @js.native @@ -40,9 +50,18 @@ object Menu extends WebComponent { protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-menu") - lazy val busy: HtmlAttr[Boolean] = htmlAttr("busy", BooleanAsAttrPresenceCodec) - lazy val busyDelay: HtmlAttr[FiniteDuration] = htmlAttr("busy-delay", FiniteDurationCodec) - lazy val headerText: HtmlAttr[String] = htmlAttr("headerText", StringAsIsCodec) + lazy val loading: HtmlAttr[Boolean] = htmlAttr("loading", BooleanAsAttrPresenceCodec) + lazy val loadingDelay: HtmlAttr[FiniteDuration] = htmlAttr("loading-delay", FiniteDurationCodec) + lazy val headerText: HtmlAttr[String] = htmlAttr("headerText", StringAsIsCodec) + + lazy val open: HtmlAttr[Boolean] = htmlAttr("open", BooleanAsAttrPresenceCodec) + lazy val openerId: HtmlAttr[String] = htmlAttr("opener", StringAsIsCodec) + + @deprecated("busy was renamed to loading", since = "2.0.0") + def busy: HtmlAttr[Boolean] = loading + + @deprecated("busyDelay was renamed to loadingDelay", since = "2.0.0") + def busyDelay: HtmlAttr[FiniteDuration] = loadingDelay object events { @@ -51,16 +70,23 @@ object Menu extends WebComponent { def item: dom.HTMLElement = js.native def text: String = js.native } - val onItemClick = new EventProp[dom.Event & HasDetail[ItemClickDetail]]("item-click") + def onItemClick = new EventProp[dom.Event & HasDetail[ItemClickDetail]]("item-click") + + def onClose = new EventProp[EventWithPreciseTarget[Ref]]("close") + def onOpen = new EventProp[EventWithPreciseTarget[Ref]]("open") + def onBeforeClose = new EventProp[dom.Event & HasDetail[HasEscPressed]]("before-close") + def onBeforeOpen = new EventProp[dom.Event & HasDetail[HasItem[MenuItem.Ref]]]("before-open") + + @deprecated("onAfterClose was renamed to onClose", since = "2.0.0") + def onAfterClose = onClose - val onAfterClose = new EventProp[dom.Event]("after-close") - val onAfterOpen = new EventProp[dom.Event]("after-open") - val onBeforeClose = new EventProp[dom.Event & HasDetail[HasEscPressed]]("before-close") - val onBeforeOpen = new EventProp[dom.Event & HasDetail[HasItem[MenuItem.Ref]]]("before-open") + @deprecated("onAfterOpen was renamed to onOpen", since = "2.0.0") + def onAfterOpen = onOpen } def getMenuById(menuId: String): Option[dom.HTMLElement & RawElement] = Option(dom.document.getElementById(menuId)).map(_.asInstanceOf[dom.HTMLElement & RawElement]) def item: MenuItem.type = MenuItem + def separator = MenuSeparator } diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MenuItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MenuItem.scala index 812348f..7d039cd 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MenuItem.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MenuItem.scala @@ -10,6 +10,7 @@ import org.scalajs.dom import scala.scalajs.js import scala.scalajs.js.annotation.JSImport import be.doeraene.webcomponents.WebComponent +import scala.concurrent.duration.FiniteDuration /** ui5-menu-item is the item to use inside a ui5-menu. An arbitrary hierarchy structure can be represented by * recursively nesting menu items. @@ -39,7 +40,11 @@ object MenuItem extends WebComponent with HasIcon with HasText { lazy val disabled: HtmlAttr[Boolean] = htmlAttr("disabled", BooleanAsAttrPresenceCodec) - lazy val startsSection: HtmlAttr[Boolean] = htmlAttr("starts-section", BooleanAsAttrPresenceCodec) + @scala.annotation.compileTimeOnly("startsSection has been replace by the MenuSeparator component") + def startsSection: HtmlAttr[Boolean] = ??? + + lazy val loading: HtmlAttr[Boolean] = htmlAttr("loading", BooleanAsAttrPresenceCodec) + lazy val loadingDelay: HtmlAttr[FiniteDuration] = htmlAttr("loading-delay", FiniteDurationCodec) // reference to itself, useful for sub-menus def item: MenuItem.type = this diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MenuSeparator.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MenuSeparator.scala new file mode 100644 index 0000000..6e5d895 --- /dev/null +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MenuSeparator.scala @@ -0,0 +1,26 @@ +package be.doeraene.webcomponents.ui5 + +import com.raquo.laminar.codecs.{BooleanAsAttrPresenceCodec, StringAsIsCodec} +import com.raquo.laminar.api.L.* +import com.raquo.laminar.tags.CustomHtmlTag +import com.raquo.laminar.keys.HtmlAttr +import com.raquo.laminar.nodes.ReactiveHtmlElement +import org.scalajs.dom + +import scala.scalajs.js +import scala.scalajs.js.annotation.JSImport +import be.doeraene.webcomponents.WebComponent +import scala.concurrent.duration.FiniteDuration + +/** The ui5-menu-separator represents a horizontal line to separate menu items inside a ui5-menu. + */ +object MenuSeparator extends WebComponent { + + @js.native + trait RawElement extends js.Object {} + + type Ref = dom.html.Element & RawElement + + protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-menu-separator") + +} diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MultiComboBox.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MultiComboBox.scala index 43f9c4a..0625328 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MultiComboBox.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MultiComboBox.scala @@ -41,11 +41,13 @@ object MultiComboBox extends WebComponent with HasAccessibleName with HasValue { lazy val filter: HtmlAttr[ComboBoxFilter] = htmlAttr("filter", ComboBoxFilter.AsStringCodec) lazy val placeholder: HtmlAttr[String] = htmlAttr("placeholder", StringAsIsCodec) lazy val readonly: HtmlAttr[Boolean] = htmlAttr("readonly", BooleanAsAttrPresenceCodec) - lazy val allowCustomValues: HtmlAttr[Boolean] = - htmlAttr("allow-custom-values", BooleanAsAttrPresenceCodec) + lazy val noValidation: HtmlAttr[Boolean] = htmlAttr("no-validation", BooleanAsAttrPresenceCodec) lazy val required: HtmlAttr[Boolean] = htmlAttr("required", BooleanAsAttrPresenceCodec) lazy val valueState: HtmlAttr[ValueState] = htmlAttr("value-state", ValueState.AsStringCodec) + @deprecated("allCustomValues has been renamed to noValidation", since = "2.0.0") + def allowCustomValues = noValidation + object slots { val default: Slot = new Slot("default") val icon: Slot = new Slot("icon") @@ -58,6 +60,8 @@ object MultiComboBox extends WebComponent with HasAccessibleName with HasValue { val onSelectionChange: EventProp[dom.Event & HasDetail[HasItems[MultiComboBoxItem.Ref]]] = new EventProp( "selection-change" ) + val onOpen: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("open") + val onClose: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("close") } def item: MultiComboBoxItem.type = MultiComboBoxItem diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MultiComboBoxGroupItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MultiComboBoxGroupItem.scala index 72125cb..4e1d2e0 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MultiComboBoxGroupItem.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MultiComboBoxGroupItem.scala @@ -27,10 +27,12 @@ object MultiComboBoxGroupItem extends WebComponent with HasText { type Ref = dom.html.Element & RawElement - protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-mcb-group-item") + protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-mcb-item-group") object slots {} object events {} + def item = MultiComboBoxItem + } diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/NotificationAction.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/NotificationAction.scala index 3f94d92..276ced1 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/NotificationAction.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/NotificationAction.scala @@ -25,12 +25,13 @@ object NotificationAction extends WebComponent with HasText with HasIcon { @js.native trait RawElement extends js.Object {} - @js.native - @JSImport("@ui5/webcomponents-fiori/dist/NotificationAction.js", JSImport.Default) - object RawImport extends js.Object + // todo: migration notification action + // @js.native + // @JSImport("@ui5/webcomponents-fiori/dist/NotificationAction.js", JSImport.Default) + // object RawImport extends js.Object - // object-s are lazy so you need to actually use them in your code to prevent dead code elimination - used(RawImport) + // // object-s are lazy so you need to actually use them in your code to prevent dead code elimination + // used(RawImport) type Ref = dom.html.Element & RawElement diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/NotificationList.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/NotificationList.scala new file mode 100644 index 0000000..9a4fde0 --- /dev/null +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/NotificationList.scala @@ -0,0 +1,50 @@ +package be.doeraene.webcomponents.ui5 + +import be.doeraene.webcomponents.ui5.configkeys.Priority +import be.doeraene.webcomponents.ui5.internal.Slot +import com.raquo.laminar.codecs.{BooleanAsAttrPresenceCodec, StringAsIsCodec} +import com.raquo.laminar.api.L.* +import com.raquo.laminar.tags.CustomHtmlTag +import com.raquo.laminar.keys.HtmlAttr +import com.raquo.laminar.nodes.ReactiveHtmlElement +import org.scalajs.dom + +import scala.scalajs.js +import scala.scalajs.js.annotation.JSImport +import be.doeraene.webcomponents.ui5.configkeys.WrappingType +import scala.concurrent.duration.FiniteDuration +import be.doeraene.webcomponents.ui5.eventtypes.{EventWithPreciseTarget, HasDetail, HasItem} +import be.doeraene.webcomponents.WebComponent + +/** The ui5-notification-list web component represents a container for ui5-li-notification-group and + * ui5-li-notification. + */ +object NotificationList extends WebComponent { + + @js.native + trait RawElement extends js.Object {} + + @js.native + @JSImport("@ui5/webcomponents-fiori/dist/NotificationList.js", JSImport.Default) + object RawImport extends js.Object + + // object-s are lazy so you need to actually use them in your code to prevent dead code elimination + used(RawImport) + + type Ref = dom.html.Element & RawElement + + protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-notification-list") + + lazy val noDataText: HtmlAttr[String] = htmlAttr("no-data-text", StringAsIsCodec) + + object slots {} + + object events { + val onItemClick = new EventProp[EventWithPreciseTarget[Ref] & HasDetail[HasItem[item.Ref]]]("item-click") + val onItemClose = new EventProp[EventWithPreciseTarget[Ref] & HasDetail[HasItem[item.Ref]]]("item-close") + val onItemToggle = new EventProp[EventWithPreciseTarget[Ref] & HasDetail[HasItem[item.Ref]]]("item-toggle") + } + + def item = NotificationListItem + +} diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/NotificationListGroupItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/NotificationListGroupItem.scala index bbc33f4..efd418f 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/NotificationListGroupItem.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/NotificationListGroupItem.scala @@ -39,29 +39,33 @@ object NotificationListGroupItem extends WebComponent { protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-li-notification-group") - lazy val collapsed: HtmlAttr[Boolean] = htmlAttr("collapsed", BooleanAsAttrPresenceCodec) - - lazy val showCounter: HtmlAttr[Boolean] = htmlAttr("show-counter", BooleanAsAttrPresenceCodec) - - lazy val busy: HtmlAttr[Boolean] = htmlAttr("busy", BooleanAsAttrPresenceCodec) - - lazy val busyDelay: HtmlAttr[FiniteDuration] = htmlAttr("busy-delay", FiniteDurationCodec) - - lazy val priority: HtmlAttr[Priority] = htmlAttr("priority", Priority.AsStringCodec) - - lazy val read: HtmlAttr[Boolean] = htmlAttr("read", BooleanAsAttrPresenceCodec) - - lazy val showClose: HtmlAttr[Boolean] = htmlAttr("show-close", BooleanAsAttrPresenceCodec) - - lazy val titleText: HtmlAttr[String] = htmlAttr("title-text", StringAsIsCodec) + lazy val collapsed: HtmlAttr[Boolean] = htmlAttr("collapsed", BooleanAsAttrPresenceCodec) + lazy val loading: HtmlAttr[Boolean] = htmlAttr("loading", BooleanAsAttrPresenceCodec) + lazy val loadingDelay: HtmlAttr[FiniteDuration] = htmlAttr("loading-delay", FiniteDurationCodec) + lazy val read: HtmlAttr[Boolean] = htmlAttr("read", BooleanAsAttrPresenceCodec) + lazy val titleText: HtmlAttr[String] = htmlAttr("title-text", StringAsIsCodec) + + @scala.annotation.compileTimeOnly("showClose property has been removed") + def showClose: HtmlAttr[Boolean] = ??? + @scala.annotation.compileTimeOnly("showCounter property has been removed") + def showCounter: HtmlAttr[Boolean] = ??? + @scala.annotation.compileTimeOnly("priority property has been removed") + def priority: HtmlAttr[Priority] = ??? + @deprecated("busy property has been renamed to loading", since = "2.0.0") + def busy: HtmlAttr[Boolean] = loading + @deprecated("busyDelay property has been renamed to loadingDelay", since = "2.0.0") + def busyDelay: HtmlAttr[FiniteDuration] = loadingDelay object slots { - val actions: Slot = Slot("actions") + @scala.annotation.compileTimeOnly("actions slot has been removed") + def actions: Slot = Slot("actions") } object events { val onToggle: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("toggle") - val onClose: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("close") + + @scala.annotation.compileTimeOnly("close event of NotificationListGroupItem has been removed") + def onClose: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("close") } def item: NotificationListItem.type = NotificationListItem diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/NotificationListItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/NotificationListItem.scala index d05a810..0437503 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/NotificationListItem.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/NotificationListItem.scala @@ -15,6 +15,7 @@ import be.doeraene.webcomponents.ui5.configkeys.WrappingType import scala.concurrent.duration.FiniteDuration import be.doeraene.webcomponents.ui5.eventtypes.EventWithPreciseTarget import be.doeraene.webcomponents.WebComponent +import be.doeraene.webcomponents.ui5.configkeys.ValueState /** The ui5-li-notification is a type of list item, meant to display notifications. * @@ -41,24 +42,28 @@ object NotificationListItem extends WebComponent { protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-li-notification") - lazy val wrappingType: HtmlAttr[WrappingType] = htmlAttr("wrapping-type", WrappingType.AsStringCodec) - - lazy val busy: HtmlAttr[Boolean] = htmlAttr("busy", BooleanAsAttrPresenceCodec) - - lazy val busyDelay: HtmlAttr[FiniteDuration] = htmlAttr("busy-delay", FiniteDurationCodec) - - lazy val priority: HtmlAttr[Priority] = htmlAttr("priority", Priority.AsStringCodec) - - lazy val read: HtmlAttr[Boolean] = htmlAttr("read", BooleanAsAttrPresenceCodec) - - lazy val showClose: HtmlAttr[Boolean] = htmlAttr("show-close", BooleanAsAttrPresenceCodec) - - lazy val titleText: HtmlAttr[String] = htmlAttr("title-text", StringAsIsCodec) + lazy val wrappingType: HtmlAttr[WrappingType] = htmlAttr("wrapping-type", WrappingType.AsStringCodec) + lazy val loading: HtmlAttr[Boolean] = htmlAttr("loading", BooleanAsAttrPresenceCodec) + lazy val loadingDelay: HtmlAttr[FiniteDuration] = htmlAttr("loading-delay", FiniteDurationCodec) + lazy val state: HtmlAttr[ValueState] = ValueState.asHtmlAttr("state") + lazy val read: HtmlAttr[Boolean] = htmlAttr("read", BooleanAsAttrPresenceCodec) + lazy val showClose: HtmlAttr[Boolean] = htmlAttr("show-close", BooleanAsAttrPresenceCodec) + lazy val titleText: HtmlAttr[String] = htmlAttr("title-text", StringAsIsCodec) + + @deprecated("busy property has been renamed to loading", since = "2.0.0") + def busy: HtmlAttr[Boolean] = loading + @deprecated("busyDelay property has been renamed to loadingDelay", since = "2.0.0") + def busyDelay: HtmlAttr[FiniteDuration] = loadingDelay + @deprecated("priority property has been renamed to state", since = "2.0.0") + def priority: HtmlAttr[ValueState] = state object slots { val avatar: Slot = Slot("avatar") val footnotes: Slot = Slot("footnotes") - val actions: Slot = Slot("actions") + val menu: Slot = Slot("menu") + + @deprecated("The actions slot has been renamed to menu, which expect a Menu component", since = "2.0.0") + def actions: Slot = menu } object events { diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Page.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Page.scala index 5fcff60..a9d724d 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Page.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Page.scala @@ -38,15 +38,21 @@ object Page extends WebComponent { lazy val backgroundDesign: HtmlAttr[PageBackgroundDesign] = htmlAttr("background-design", PageBackgroundDesign.AsStringCodec) - lazy val disableScrolling: HtmlAttr[Boolean] = - htmlAttr("disable-scrolling", BooleanAsAttrPresenceCodec) + lazy val noScrolling: HtmlAttr[Boolean] = htmlAttr("no-scrolling", BooleanAsAttrPresenceCodec) - lazy val floatingFooter: HtmlAttr[Boolean] = - htmlAttr("floating-footer", BooleanAsAttrPresenceCodec) + lazy val fixedFooter: HtmlAttr[Boolean] = htmlAttr("fixed-footer", BooleanAsAttrPresenceCodec) lazy val hideFooter: HtmlAttr[Boolean] = htmlAttr("hide-footer", BooleanAsAttrPresenceCodec) + @deprecated("disableScrolling has been renamed to noScrolling", since = "2.0.0") + def disableScrolling: HtmlAttr[Boolean] = noScrolling + + @scala.annotation.compileTimeOnly( + "floatingFooter has been removed and is now the default. If you don't want your page footer to float, use the new fixedFooter property." + ) + def floatingFooter: HtmlAttr[Boolean] = ??? + object slots { val footer: Slot = new Slot("footer") val header: Slot = new Slot("header") diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Popover.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Popover.scala index 94df846..c3832bd 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Popover.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Popover.scala @@ -30,13 +30,31 @@ object Popover extends WebComponent with HasAccessibleName { @js.native trait RawElement extends js.Object { - def showAt(opener: dom.HTMLElement): Unit = js.native + var opener: js.UndefOr[dom.HTMLElement | String] = js.native + + def open: Boolean = js.native def applyFocus(): Unit = js.native - def close(): Unit = js.native + } - def isOpen(): Boolean = js.native + object RawElement { + extension (rawElement: RawElement) { + @deprecated("close method is replaced by using the open property", since = "2.0.0") + def close(): Unit = + rawElement.asInstanceOf[js.Dynamic].updateDynamic("open")(false) + + @deprecated("showAt method is replaced by using the open and opener property", since = "2.0.0") + def showAt(opener: dom.HTMLElement): Unit = { + rawElement.asInstanceOf[js.Dynamic].updateDynamic("opener")(opener) + scala.scalajs.js.timers.setTimeout(0) { + rawElement.asInstanceOf[js.Dynamic].updateDynamic("open")(true) + } + } + + @deprecated("isOpen has been removed, use the open property instead.") + def isOpen(): Boolean = rawElement.open + } } @js.native @@ -60,18 +78,16 @@ object Popover extends WebComponent with HasAccessibleName { lazy val hideArrow: HtmlAttr[Boolean] = htmlAttr("hide-arrow", BooleanAsAttrPresenceCodec) - lazy val hideBackdrop: HtmlAttr[Boolean] = htmlAttr("hide-backdrop", BooleanAsAttrPresenceCodec) - lazy val horizontalAlign: HtmlAttr[PopoverHorizontalAlign] = - htmlAttr("horizontal-align", PopoverHorizontalAlign.AsStringCodec) + PopoverHorizontalAlign.asHtmlAttr("horizontal-align") lazy val modal: HtmlAttr[Boolean] = htmlAttr("modal", BooleanAsAttrPresenceCodec) /** id of the element that opens the popover */ - lazy val opener: HtmlAttr[String] = htmlAttr("opener", StringAsIsCodec) + lazy val openerId: HtmlAttr[String] = htmlAttr("opener", StringAsIsCodec) - lazy val placementType: HtmlAttr[PopoverPlacementType] = - htmlAttr("placement-type", PopoverPlacementType.AsStringCodec) + lazy val placement: HtmlAttr[PopoverPlacementType] = + PopoverPlacementType.asHtmlAttr("placement") lazy val verticalAlign: HtmlAttr[PopoverVerticalAlign] = htmlAttr("vertical-align", PopoverVerticalAlign.AsStringCodec) @@ -83,14 +99,31 @@ object Popover extends WebComponent with HasAccessibleName { lazy val preventFocusRestore: HtmlAttr[Boolean] = htmlAttr("prevent-focus-restore", BooleanAsAttrPresenceCodec) + lazy val preventInitialFocus: HtmlAttr[Boolean] = + htmlAttr("prevent-initial-focus", BooleanAsAttrPresenceCodec) + + @scala.annotation.compileTimeOnly("hideBackdrop property has been removed.") + def hideBackdrop: HtmlAttr[Boolean] = ??? + + @deprecated("opener has been renamed to openerId", since = "2.0.0") + def opener: HtmlAttr[String] = openerId + + @deprecated("placementType has been renamed to placement", since = "2.0.0") + def placementType: HtmlAttr[PopoverPlacementType] = placement + object slots { def header: Slot = new Slot("header") def footer: Slot = new Slot("footer") } object events { - val onAfterClose: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("after-close") - val onAfterOpen: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("after-open") + val onClose: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("close") + val onOpen: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("open") + + @deprecated("onAfterClose has been renamed to onClose", since = "2.0.0") + def onAfterClose: EventProp[EventWithPreciseTarget[Ref]] = onClose + @deprecated("onAfterOpen has been renamed to onOpen", since = "2.0.0") + def onAfterOpen: EventProp[EventWithPreciseTarget[Ref]] = onOpen trait BeforeCloseInfo extends js.Object { def escPressed: Boolean @@ -106,18 +139,26 @@ object Popover extends WebComponent with HasAccessibleName { Option(dom.document.getElementById(id)).map(_.asInstanceOf[dom.HTMLElement & RawElement]) /** [[Observer]] you can feed a popover ref and a [[dom.HTMLElement]] to open the popover at the element. */ - val showAtObserver: Observer[(Ref, dom.HTMLElement)] = Observer(_.showAt(_)) + def showAtObserver: Observer[(Ref, dom.HTMLElement)] = Observer { (ref, opener) => + val dyn = ref.asInstanceOf[js.Dynamic] + ref.opener = opener + js.timers.setTimeout(0) { + dyn.updateDynamic("open")(true) + } + } /** [[Mod]] for [[Popover]]s opening them each time the stream emits an opener [[dom.HTMLElement]] */ def showAtFromEvents(openerEvents: EventStream[dom.HTMLElement]): Mod[ReactiveHtmlElement[Ref]] = inContext[ReactiveHtmlElement[Ref]](el => openerEvents.map(el.ref -> _) --> showAtObserver) /** [[Observer]] you can feed a popover ref to close it. */ - val closeObserver: Observer[Ref] = Observer(_.close()) + @deprecated("closeObserver has been replaced by using the open property", since = "2.0.0") + def closeObserver: Observer[Ref] = Observer(_.asInstanceOf[js.Dynamic].updateDynamic("open")(false)) /** [[Mod]] for [[Popover]]s closing them each time the stream emits. */ + @deprecated("closeFromEvents has been replaced by using the open property", since = "2.0.0") def closeFromEvents(closeEvents: EventStream[Unit]): Mod[ReactiveHtmlElement[Ref]] = - inContext[ReactiveHtmlElement[Ref]](el => closeEvents.mapTo(el.ref) --> closeObserver) + open <-- closeEvents.mapTo(false) /** Combines both showAtFromEvents and closeFromEvents from an event stream emitting maybe an opener. * @@ -129,7 +170,7 @@ object Popover extends WebComponent with HasAccessibleName { ): Mod[ReactiveHtmlElement[Ref]] = List( showAtFromEvents(openerAndCloseEvents.collect { case Some(element) => element }), - closeFromEvents(openerAndCloseEvents.collect { case None => () }) + open <-- openerAndCloseEvents.collect { case None => false } ) /** [[Observer]] you can feed a popover ref to apply focus to it. */ diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ProgressIndicator.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ProgressIndicator.scala index a2d9a02..9e7852d 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ProgressIndicator.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ProgressIndicator.scala @@ -38,9 +38,12 @@ object ProgressIndicator extends WebComponent { protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-progress-indicator") lazy val accessibleName: HtmlAttr[String] = htmlAttr("accessible-name", StringAsIsCodec) - lazy val disabled: HtmlAttr[Boolean] = htmlAttr("disabled", BooleanAsAttrPresenceCodec) lazy val displayValue: HtmlAttr[String] = htmlAttr("display-value", StringAsIsCodec) lazy val hideValue: HtmlAttr[Boolean] = htmlAttr("hide-value", BooleanAsAttrPresenceCodec) lazy val value: HtmlAttr[Int] = htmlAttr("value", IntAsStringCodec) - lazy val valueState: HtmlAttr[ValueState] = htmlAttr("value-state", ValueState.AsStringCodec) + lazy val valueState: HtmlAttr[ValueState] = ValueState.asHtmlAttr("value-state") + + @scala.annotation.compileTimeOnly("disabled property of progress indicator has been disabled") + def disabled: HtmlAttr[Boolean] = ??? + } diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/RadioButton.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/RadioButton.scala index f9570e5..47eaeac 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/RadioButton.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/RadioButton.scala @@ -45,10 +45,7 @@ object RadioButton extends WebComponent with HasAccessibleName with HasName with lazy val readonly: HtmlAttr[Boolean] = htmlAttr("readonly", BooleanAsAttrPresenceCodec) lazy val required: HtmlAttr[Boolean] = htmlAttr("required", BooleanAsAttrPresenceCodec) - lazy val value: HtmlAttr[String] = { - InputElementsFormSupport - htmlAttr("value", StringAsIsCodec) - } + lazy val value: HtmlAttr[String] = htmlAttr("value", StringAsIsCodec) lazy val valueState: HtmlAttr[ValueState] = htmlAttr("value-state", ValueState.AsStringCodec) diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SegmentedButton.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SegmentedButton.scala index ff46efe..dfcb4fa 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SegmentedButton.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SegmentedButton.scala @@ -26,7 +26,6 @@ object SegmentedButton extends WebComponent { @js.native trait RawElement extends js.Object { - def selectedItem: SegmentedButtonItem.Ref = js.native @JSName("selectedItems") def selectedItemsJS: js.Array[SegmentedButtonItem.Ref] = js.native @@ -35,6 +34,9 @@ object SegmentedButton extends WebComponent { object RawElement { extension (elem: RawElement) { def selectedItems: Vector[SegmentedButtonItem.Ref] = elem.selectedItemsJS.toVector + + @deprecated("selectedItem has been deprecated and you should use selectedItems(0) instead", since = "2.0.0") + def selectedItem = elem.selectedItemsJS(0) } } @@ -49,8 +51,11 @@ object SegmentedButton extends WebComponent { protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-segmented-button") - lazy val accessibleName: HtmlAttr[String] = htmlAttr("accessible-name", StringAsIsCodec) - lazy val mode: HtmlAttr[SegmentedButtonMode] = htmlAttr("mode", SegmentedButtonMode.AsStringCodec) + lazy val accessibleName: HtmlAttr[String] = htmlAttr("accessible-name", StringAsIsCodec) + lazy val selectionMode: HtmlAttr[SegmentedButtonMode] = SegmentedButtonMode.asHtmlAttr("selection-mode") + + @deprecated("mode property of SegmentedButton has been renamed to selectionMode", since = "2.0.0") + def mode: HtmlAttr[SegmentedButtonMode] = selectionMode object slots {} diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SegmentedButtonItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SegmentedButtonItem.scala index f929844..248d581 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SegmentedButtonItem.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SegmentedButtonItem.scala @@ -44,15 +44,22 @@ object SegmentedButtonItem extends WebComponent with HasAccessibleName with HasI protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-segmented-button-item") - lazy val design: HtmlAttr[ButtonDesign] = htmlAttr("design", ButtonDesign.AsStringCodec) + lazy val selected: HtmlAttr[Boolean] = htmlAttr("selected", BooleanAsAttrPresenceCodec) - lazy val iconEnd: HtmlAttr[Boolean] = htmlAttr("icon-end", BooleanAsAttrPresenceCodec) + @scala.annotation.compileTimeOnly("design property has been removed") + def design: HtmlAttr[ButtonDesign] = ??? - lazy val submits: HtmlAttr[Boolean] = htmlAttr("submits", BooleanAsAttrPresenceCodec) + @scala.annotation.compileTimeOnly("iconEnd property has been removed") + def iconEnd: HtmlAttr[Boolean] = ??? - lazy val pressed: HtmlAttr[Boolean] = htmlAttr("pressed", BooleanAsAttrPresenceCodec) + @scala.annotation.compileTimeOnly("submits property has been removed") + def submits: HtmlAttr[Boolean] = ??? - lazy val accessibilityAttributes: HtmlAttr[js.Object] = ??? // todo + @deprecated("pressed property of SegmentedButton items has been renamed to selected", since = "2.0.0") + def pressed: HtmlAttr[Boolean] = selected + + @scala.annotation.compileTimeOnly("accessibilityAttributes property has been removed") + def accessibilityAttributes: HtmlAttr[js.Object] = ??? lazy val disabled: HtmlAttr[Boolean] = htmlAttr("disabled", BooleanAsAttrPresenceCodec) diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Select.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Select.scala index f64c877..b6ebfbe 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Select.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Select.scala @@ -44,7 +44,7 @@ object Select extends WebComponent with HasIcon with HasAccessibleName with HasN lazy val required: HtmlAttr[Boolean] = htmlAttr("required", BooleanAsAttrPresenceCodec) lazy val readonly: HtmlAttr[Boolean] = htmlAttr("readonly", BooleanAsAttrPresenceCodec) - lazy val valueState: HtmlAttr[ValueState] = htmlAttr("value-state", ValueState.AsStringCodec) + lazy val valueState: HtmlAttr[ValueState] = ValueState.asHtmlAttr("value-state") object slots { val valueStateMessage: Slot = new Slot("valueStateMessage") @@ -64,5 +64,6 @@ object Select extends WebComponent with HasIcon with HasAccessibleName with HasN } def option: SelectOption.type = SelectOption + def optionCustom = SelectOptionCustom } diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SelectOption.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SelectOption.scala index df87863..ad3638a 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SelectOption.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SelectOption.scala @@ -12,9 +12,6 @@ import scala.scalajs.js.annotation.JSImport import be.doeraene.webcomponents.WebComponent /** The ui5-option component defines the content of an option in the ui5-select. - * - * @see - * the doc for more information. */ object SelectOption extends WebComponent with HasIcon with HasAdditionalText with HasValue { @@ -24,7 +21,7 @@ object SelectOption extends WebComponent with HasIcon with HasAdditionalText wit } object RawElement { - implicit final class RichRawElement(val element: RawElement) extends AnyVal { + extension (element: RawElement) { def maybeValue: Option[String] = element.value match { case value: String => Some(value) case _: Unit => None @@ -32,11 +29,22 @@ object SelectOption extends WebComponent with HasIcon with HasAdditionalText wit } } + @js.native + @JSImport("@ui5/webcomponents/dist/Option.js", JSImport.Default) + object RawImport extends js.Object + + // object-s are lazy so you need to actually use them in your code to prevent dead code elimination + used(RawImport) + type Ref = dom.html.Element & RawElement protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-option") - lazy val disabled: HtmlAttr[Boolean] = htmlAttr("disabled", BooleanAsAttrPresenceCodec) lazy val selected: HtmlAttr[Boolean] = htmlAttr("selected", BooleanAsAttrPresenceCodec) + lazy val tooltip: HtmlAttr[String] = htmlAttr("tooltip", StringAsIsCodec) + @scala.annotation.compileTimeOnly( + "The disabled property of the ui5-option is removed. Now, it won't take effect - rendering disabled options is not recommended from a UX perspective." + ) + def disabled: HtmlAttr[Boolean] = ??? } diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SelectOptionCustom.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SelectOptionCustom.scala new file mode 100644 index 0000000..eaf4a4f --- /dev/null +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SelectOptionCustom.scala @@ -0,0 +1,47 @@ +package be.doeraene.webcomponents.ui5 + +import com.raquo.laminar.codecs.{BooleanAsAttrPresenceCodec, StringAsIsCodec} +import com.raquo.laminar.api.L.* +import com.raquo.laminar.tags.CustomHtmlTag +import com.raquo.laminar.keys.HtmlAttr +import com.raquo.laminar.nodes.ReactiveHtmlElement +import org.scalajs.dom + +import scala.scalajs.js +import scala.scalajs.js.annotation.JSImport +import be.doeraene.webcomponents.WebComponent + +/** The ui5-option component defines the content of an option in the ui5-select. + */ +object SelectOptionCustom extends WebComponent with HasValue { + + @js.native + trait RawElement extends js.Object { + def value: String | Unit = js.native + } + + object RawElement { + extension (element: RawElement) { + def maybeValue: Option[String] = element.value match { + case value: String => Some(value) + case _: Unit => None + } + } + } + + @js.native + @JSImport("@ui5/webcomponents/dist/OptionCustom.js", JSImport.Default) + object RawImport extends js.Object + + // object-s are lazy so you need to actually use them in your code to prevent dead code elimination + used(RawImport) + + type Ref = dom.html.Element & RawElement + + protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-option-custom") + + lazy val tooltip: HtmlAttr[String] = htmlAttr("tooltip", StringAsIsCodec) + lazy val selected: HtmlAttr[Boolean] = htmlAttr("selected", BooleanAsAttrPresenceCodec) + lazy val displayText: HtmlAttr[String] = htmlAttr("display-text", StringAsIsCodec) + +} diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ShellBar.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ShellBar.scala index 63fc27f..deb8f4a 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ShellBar.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ShellBar.scala @@ -28,8 +28,6 @@ object ShellBar extends WebComponent with HasIcon { trait RawElement extends js.Object { def closeOverflow(): Unit = js.native - def accessibilityRoles: js.Object = js.native - def accessibilityTexts: js.Object = js.native def accessibilityAttributes: js.Object = js.native def copilotDomRef: dom.HTMLElement = js.native diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SideNavigationItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SideNavigationItem.scala index 1f7df84..35289a0 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SideNavigationItem.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SideNavigationItem.scala @@ -43,13 +43,15 @@ object SideNavigationItem extends WebComponent with HasText { lazy val selected: HtmlAttr[Boolean] = htmlAttr("selected", BooleanAsAttrPresenceCodec) - lazy val wholeItemToggleable: HtmlAttr[Boolean] = - htmlAttr("whole-item-toggleable", BooleanAsAttrPresenceCodec) - lazy val href: HtmlAttr[String] = htmlAttr("href", StringAsIsCodec) lazy val target: HtmlAttr[LinkTarget] = htmlAttr("target", LinkTarget.AsStringCodec) + @scala.annotation.compileTimeOnly( + "The wholeItemToggleable property is now removed. The functionality of clicking the whole item to show/hide the sub-items is no longer available. The collapsing/expanding of the item can still be done by pressing the icon." + ) + def wholeItemToggleable: HtmlAttr[Boolean] = ??? + object slots {} object events {} diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SplitButton.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SplitButton.scala index b4338e3..8b0663f 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SplitButton.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SplitButton.scala @@ -17,10 +17,6 @@ import be.doeraene.webcomponents.WebComponent /** ui5-split-button enables users to trigger actions. It is constructed of two separate actions - default action and * arrow action that can be activated by clicking or tapping, or by pressing certain keyboard keys - Space or Enter for * default action, and Arrow Down or Arrow Up for arrow action. - * - * @see - * the doc for more - * information. */ object SplitButton extends WebComponent with HasIcon { @@ -41,11 +37,13 @@ object SplitButton extends WebComponent with HasIcon { protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-split-button") lazy val accessibleName: HtmlAttr[String] = htmlAttr("accessible-name", StringAsIsCodec) - lazy val activeIcon: HtmlAttr[IconName] = htmlAttr("active-icon", IconName.AsStringCodec) lazy val design: HtmlAttr[ButtonDesign] = htmlAttr("design", ButtonDesign.AsStringCodec) lazy val disabled: HtmlAttr[Boolean] = htmlAttr("disabled", BooleanAsAttrPresenceCodec) lazy val activeArrowButton: HtmlAttr[Boolean] = htmlAttr("active-arrow-button", BooleanAsAttrPresenceCodec) + @scala.annotation.compileTimeOnly("activeIcon property of SplitButton has been removed") + def activeIcon: HtmlAttr[IconName] = ??? + object slots {} object events { diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SuggestionGroupItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SuggestionGroupItem.scala index a424da6..1dd2cbb 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SuggestionGroupItem.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SuggestionGroupItem.scala @@ -18,13 +18,13 @@ import be.doeraene.webcomponents.WebComponent * @see * the doc for more information. */ -object SuggestionGroupItem extends WebComponent with HasText { +object SuggestionGroupItem extends WebComponent { @js.native trait RawElement extends js.Object {} @js.native - @JSImport("@ui5/webcomponents/dist/features/InputSuggestions.js", JSImport.Default) + @JSImport("@ui5/webcomponents/dist/features/SuggestionGroupItem.js", JSImport.Default) object RawImport extends js.Object // object-s are lazy so you need to actually use them in your code to prevent dead code elimination @@ -32,7 +32,13 @@ object SuggestionGroupItem extends WebComponent with HasText { type Ref = dom.html.Element & RawElement - protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-ui5-suggestion-group-item") + protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-suggestion-item-group") + + lazy val headerText: HtmlAttr[String] = htmlAttr("header-text", StringAsIsCodec) + lazy val headerAccessibleName: HtmlAttr[String] = htmlAttr("header-accessible-name", StringAsIsCodec) + + @deprecated("text has been replaced by headerText", since = "2.0.0") + def text: HtmlAttr[String] = headerText object slots {} diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Tab.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Tab.scala index fce797b..0b86141 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Tab.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Tab.scala @@ -23,7 +23,14 @@ object Tab extends WebComponent with HasIcon with HasText { @js.native trait RawElement extends js.Object { - def getTabInStripDomRef(): dom.Element = js.native + def getDomRefInStrip(): dom.Element = js.native + } + + object RawElement { + extension (rawElement: RawElement) { + @deprecated("getTabInStripDomRef method of Tab element has been renamed to getDomRefInStrip", since = "2.0.0") + def getTabInStripDomRef(): dom.Element = rawElement.getDomRefInStrip() + } } @js.native @@ -45,7 +52,10 @@ object Tab extends WebComponent with HasIcon with HasText { lazy val additionalText: HtmlAttr[String] = htmlAttr("additional-text", StringAsIsCodec) object slots { - val subTabs: Slot = new Slot("subTabs") + @deprecated("subTabs Tab slot has been renamed to items") + def subTabs: Slot = items + + val items: Slot = Slot("items") } } diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TabContainer.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TabContainer.scala index 7ea625a..c6de2aa 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TabContainer.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TabContainer.scala @@ -43,17 +43,24 @@ object TabContainer extends WebComponent { protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-tabcontainer") - lazy val disabled: HtmlAttr[Boolean] = htmlAttr("disabled", BooleanAsAttrPresenceCodec) - lazy val collapsed: HtmlAttr[Boolean] = htmlAttr("collapsed", BooleanAsAttrPresenceCodec) - lazy val fixed: HtmlAttr[Boolean] = htmlAttr("fixed", BooleanAsAttrPresenceCodec) - lazy val showOverflow: HtmlAttr[Boolean] = htmlAttr("show-overflow", BooleanAsAttrPresenceCodec) - lazy val tabLayout: HtmlAttr[TabLayout] = htmlAttr("tab-layout", TabLayout.AsStringCodec) - lazy val tabsOverflowMode: HtmlAttr[TabsOverflowMode] = - htmlAttr("tabs-overflow-mode", TabsOverflowMode.AsStringCodec) + lazy val disabled: HtmlAttr[Boolean] = htmlAttr("disabled", BooleanAsAttrPresenceCodec) + lazy val collapsed: HtmlAttr[Boolean] = htmlAttr("collapsed", BooleanAsAttrPresenceCodec) + lazy val tabLayout: HtmlAttr[TabLayout] = htmlAttr("tab-layout", TabLayout.AsStringCodec) + lazy val overflowMode: HtmlAttr[TabsOverflowMode] = + htmlAttr("overflow-mode", TabsOverflowMode.AsStringCodec) + + @scala.annotation.compileTimeOnly("fixed property of TabContainer has been removed") + def fixed: HtmlAttr[Boolean] = ??? + + @deprecated("tabsOverflowMode property has been renamed to overflowMode", since = "2.0.0") + def tabsOverflowMode: HtmlAttr[TabsOverflowMode] = overflowMode + + @scala.annotation.compileTimeOnly("showOverflow property has been removed. Use the overflowButton slot instead.") + def showOverflow: HtmlAttr[Boolean] = ??? object slots { - val overflowButton: Slot = new Slot("overflowButton") - val startOverflowButton: Slot = new Slot("startOverflowButton") + val overflowButton: Slot = Slot("overflowButton") + val startOverflowButton: Slot = Slot("startOverflowButton") } object events { diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Table.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Table.scala index 0ded7ff..5f28aaf 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Table.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Table.scala @@ -24,7 +24,7 @@ object Table extends WebComponent { trait RawElement extends js.Object {} @js.native - @JSImport("@ui5/webcomponents/dist/Table.js", JSImport.Default) + @JSImport("@ui5/webcomponents-compat/dist/Table.js", JSImport.Default) object RawImport extends js.Object // object-s are lazy so you need to actually use them in your code to prevent dead code elimination diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableCell.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableCell.scala index b0c941a..1d20a21 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableCell.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableCell.scala @@ -15,7 +15,7 @@ object TableCell extends WebComponent { trait RawElement extends js.Object {} @js.native - @JSImport("@ui5/webcomponents/dist/TableCell.js", JSImport.Default) + @JSImport("@ui5/webcomponents-compat/dist/TableCell.js", JSImport.Default) object RawImport extends js.Object // object-s are lazy so you need to actually use them in your code to prevent dead code elimination diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableColumn.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableColumn.scala index add56f3..58dd320 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableColumn.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableColumn.scala @@ -21,7 +21,7 @@ object TableColumn extends WebComponent { trait RawElement extends js.Object {} @js.native - @JSImport("@ui5/webcomponents/dist/TableColumn.js", JSImport.Default) + @JSImport("@ui5/webcomponents-compat/dist/TableColumn.js", JSImport.Default) object RawImport extends js.Object // object-s are lazy so you need to actually use them in your code to prevent dead code elimination diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableRow.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableRow.scala index 5ac2183..62d0cea 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableRow.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableRow.scala @@ -17,7 +17,7 @@ object TableRow extends WebComponent { trait RawElement extends js.Object {} @js.native - @JSImport("@ui5/webcomponents/dist/TableRow.js", JSImport.Default) + @JSImport("@ui5/webcomponents-compat/dist/TableRow.js", JSImport.Default) object RawImport extends js.Object // object-s are lazy so you need to actually use them in your code to prevent dead code elimination diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Tag.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Tag.scala new file mode 100644 index 0000000..ef0229c --- /dev/null +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Tag.scala @@ -0,0 +1,57 @@ +package be.doeraene.webcomponents.ui5 + +import be.doeraene.webcomponents.ui5.configkeys.{ButtonDesign, ColourScheme, IconName} +import be.doeraene.webcomponents.ui5.internal.Slot +import com.raquo.laminar.codecs.{BooleanAsAttrPresenceCodec, StringAsIsCodec} +import com.raquo.laminar.api.L.* +import com.raquo.laminar.tags.CustomHtmlTag +import com.raquo.laminar.keys.HtmlAttr +import com.raquo.laminar.nodes.ReactiveHtmlElement +import org.scalajs.dom + +import scala.scalajs.js +import scala.scalajs.js.annotation.JSImport +import be.doeraene.webcomponents.WebComponent +import be.doeraene.webcomponents.ui5.configkeys.TagDesign +import be.doeraene.webcomponents.ui5.configkeys.WrappingType +import be.doeraene.webcomponents.ui5.configkeys.TagSize +import be.doeraene.webcomponents.ui5.eventtypes.EventWithPreciseTarget + +/** The ui5-tag is a component which serves the purpose to attract the user attention to some piece of information + * (state, quantity, condition, etc.). It can contain icon and text information, and its design can be chosen from + * specific design types. + */ +object Tag extends WebComponent { + + @js.native + trait RawElement extends js.Object {} + + @js.native + @JSImport("@ui5/webcomponents/dist/Tag.js", JSImport.Default) + object RawImport extends js.Object + + // object-s are lazy so you need to actually use them in your code to prevent dead code elimination + used(RawImport) + + type Ref = dom.html.Element & RawElement + + protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-tag") + + lazy val colourScheme: HtmlAttr[ColourScheme] = ColourScheme.asHtmlAttr("color-scheme") + lazy val design: HtmlAttr[TagDesign] = TagDesign.asHtmlAttr("design") + lazy val hideStateIcon: HtmlAttr[Boolean] = htmlAttr("hide-state-icon", BooleanAsAttrPresenceCodec) + lazy val interactive: HtmlAttr[Boolean] = htmlAttr("interactive", BooleanAsAttrPresenceCodec) + lazy val wrappingType: HtmlAttr[WrappingType] = WrappingType.asHtmlAttr("wrapping-type") + lazy val size: HtmlAttr[TagSize] = TagSize.asHtmlAttr("size") + + object slots { + // note that unlike most elements that have an attribute Icon, this element has a slot icon instead. + // most of the time you will want to use a ui5-icon for this slot. + val icon: Slot = new Slot("icon") + } + + object events { + val onClick = new EventProp[EventWithPreciseTarget[Ref]]("click") + } + +} diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TextArea.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TextArea.scala index d812572..1bd6691 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TextArea.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TextArea.scala @@ -43,7 +43,7 @@ object TextArea extends WebComponent with HasValue with HasAccessibleName with H lazy val growing: HtmlAttr[Boolean] = htmlAttr("growing", BooleanAsAttrPresenceCodec) lazy val showExceededText: HtmlAttr[Boolean] = htmlAttr("show-exceeded-text", BooleanAsAttrPresenceCodec) - lazy val growingMaxLines: HtmlAttr[Int] = htmlAttr("growing-max-lines", IntAsStringCodec) + lazy val growingMaxRows: HtmlAttr[Int] = htmlAttr("growing-max-rows", IntAsStringCodec) lazy val maxLength: HtmlAttr[Int] = htmlAttr("maxlength", IntAsStringCodec) lazy val rows: HtmlAttr[Int] = htmlAttr("rows", IntAsStringCodec) lazy val placeholder: HtmlAttr[String] = htmlAttr("placeholder", StringAsIsCodec) @@ -51,6 +51,9 @@ object TextArea extends WebComponent with HasValue with HasAccessibleName with H val isRequired: Setter[HtmlElement] = required := true + @deprecated("growingMaxLines has been renamed to growingMaxRows", since = "2.0.0") + def growingMaxLines: HtmlAttr[Int] = growingMaxRows + object slots { val valueStateMessage = new Slot("valueStateMessage") } diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Toast.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Toast.scala index 0f2fa96..b7a1da8 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Toast.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Toast.scala @@ -12,6 +12,7 @@ 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.eventtypes.EventWithPreciseTarget /** Simple UI button * @@ -21,8 +22,14 @@ import be.doeraene.webcomponents.WebComponent object Toast extends WebComponent with HasIcon { @js.native - trait RawElement extends js.Object { - def show(): Unit = js.native + trait RawElement extends js.Object + + object RawElement { + extension (rawElement: RawElement) { + @deprecated("show method on Toast has been replaced by the open property", since = "2.0.0") + def show(): Unit = + rawElement.asInstanceOf[js.Dynamic].updateDynamic("open")(true) + } } @js.native @@ -36,27 +43,31 @@ object Toast extends WebComponent with HasIcon { protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-toast") - lazy val placement: HtmlAttr[ToastPlacement] = htmlAttr("placement", ToastPlacement.AsStringCodec) - - lazy val duration: HtmlAttr[FiniteDuration] = htmlAttr("duration", FiniteDurationCodec) + lazy val placement: HtmlAttr[ToastPlacement] = ToastPlacement.asHtmlAttr("placement") + lazy val open: HtmlAttr[Boolean] = htmlAttr("open", BooleanAsAttrPresenceCodec) + lazy val duration: HtmlAttr[FiniteDuration] = htmlAttr("duration", FiniteDurationCodec) object slots {} - object events {} + object events { + val onClose: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("close") + } def getToastById(id: String): Option[dom.HTMLElement & RawElement] = Option(dom.document.getElementById(id)).map(_.asInstanceOf[dom.HTMLElement & RawElement]) /** [[Observer]] you can feed a toast to show it. */ - val showObserver: Observer[Ref] = Observer(_.show()) + @deprecated("showObserver has been replaced by using the open property", since = "2.0.0") + def showObserver: Observer[Ref] = Observer(_.show()) /** [[Mod]] for [[Toast]]s opening them each time the stream emits. */ + @deprecated("showFromEvents has been replaced by using the open property", since = "2.0.0") def showFromEvents(openerEvents: EventStream[Unit]): Mod[ReactiveHtmlElement[Ref]] = - inContext[ReactiveHtmlElement[Ref]](el => openerEvents.mapTo(el.ref) --> showObserver) + open <-- openerEvents.mapTo(true) /** [[Mod]] for [[Toast]]s opening them each time the stream emits, putting the given text. */ def showFromTextEvents(openerEvents: EventStream[String]): Mod[ReactiveHtmlElement[Ref]] = List( - showFromEvents(openerEvents.mapTo(())), + open <-- openerEvents.mapTo(true), child.text <-- openerEvents ) diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ToggleButton.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ToggleButton.scala index fedad9f..089f227 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ToggleButton.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ToggleButton.scala @@ -52,10 +52,7 @@ object ToggleButton extends WebComponent with HasAccessibleName with HasIcon { lazy val iconEnd: HtmlAttr[Boolean] = htmlAttr("icon-end", BooleanAsAttrPresenceCodec) - lazy val submits: HtmlAttr[Boolean] = { - SubmitsSupport - htmlAttr("submits", BooleanAsAttrPresenceCodec) - } + lazy val submits: HtmlAttr[Boolean] = htmlAttr("submits", BooleanAsAttrPresenceCodec) lazy val tooltip: HtmlAttr[String] = htmlAttr("tooltip", StringAsIsCodec) diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ToolbarButton.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ToolbarButton.scala index 1aaab25..c40bbab 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ToolbarButton.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ToolbarButton.scala @@ -38,12 +38,15 @@ object ToolbarButton extends WebComponent { lazy val design: HtmlAttr[ButtonDesign] = htmlAttr("design", ButtonDesign.AsStringCodec) lazy val disabled: HtmlAttr[Boolean] = htmlAttr("disabled", BooleanAsAttrPresenceCodec) lazy val icon: HtmlAttr[IconName] = htmlAttr("icon", IconName.AsStringCodec) - lazy val iconEnd: HtmlAttr[Boolean] = htmlAttr("icon-end", BooleanAsAttrPresenceCodec) + lazy val endIcon: HtmlAttr[IconName] = htmlAttr("endIcon", IconName.AsStringCodec) lazy val text: HtmlAttr[String] = htmlAttr("text", StringAsIsCodec) lazy val tooltip: HtmlAttr[String] = htmlAttr("tooltip", StringAsIsCodec) lazy val widthJS: HtmlAttr[String] = htmlAttr("width", StringAsIsCodec) lazy val width: HtmlAttr[CSSSize] = htmlAttr("width", CSSSize.AsStringCodec) + @scala.annotation.compileTimeOnly("iconEnd property has been removed in favour of the end-icon property") + def iconEnd: HtmlAttr[Boolean] = ??? + object slots {} object events { diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Tree.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Tree.scala index f711acc..f23309f 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Tree.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Tree.scala @@ -44,7 +44,10 @@ object Tree extends WebComponent with HasAccessibleName { lazy val headerText: HtmlAttr[String] = htmlAttr("header-text", StringAsIsCodec) lazy val noDataText: HtmlAttr[String] = htmlAttr("no-data-text", StringAsIsCodec) - lazy val mode: HtmlAttr[ListMode] = htmlAttr("mode", ListMode.AsStringCodec) + lazy val selectionMode: HtmlAttr[ListMode] = ListMode.asHtmlAttr("selection-mode") + + @deprecated("mode property of Tree has been renamed to selectionMode") + def mode: HtmlAttr[ListMode] = selectionMode object events { val onItemClick: EventProp[EventWithPreciseTarget[Ref] & HasDetail[HasItem[TreeItem.Ref]]] = new EventProp( diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TreeItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TreeItem.scala index 647a26e..fe2cc36 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TreeItem.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TreeItem.scala @@ -12,6 +12,7 @@ import scala.scalajs.js import scala.scalajs.js.annotation.JSImport import be.doeraene.webcomponents.WebComponent import be.doeraene.webcomponents.ui5.eventtypes.EventWithPreciseTarget +import be.doeraene.webcomponents.ui5.configkeys.ValueState /** This is the item to use inside a ui5-tree. You can represent an arbitrary tree structure by recursively nesting tree * items. @@ -45,6 +46,9 @@ object TreeItem extends WebComponent with HasIcon with HasText { lazy val hasChildren: HtmlAttr[Boolean] = htmlAttr[Boolean]("has-children", BooleanAsAttrPresenceCodec) lazy val intermediate: HtmlAttr[Boolean] = htmlAttr[Boolean]("intermediate", BooleanAsAttrPresenceCodec) lazy val selected: HtmlAttr[Boolean] = htmlAttr[Boolean]("selected", BooleanAsAttrPresenceCodec) + lazy val highlight: HtmlAttr[ValueState] = ValueState.asHtmlAttr("highlight") + lazy val tooltip: HtmlAttr[String] = htmlAttr("tooltip", StringAsIsCodec) + lazy val navigated: HtmlAttr[Boolean] = htmlAttr[Boolean]("navigated", BooleanAsAttrPresenceCodec) object slots {} diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UList.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UList.scala index 177f53f..2125600 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UList.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UList.scala @@ -37,16 +37,23 @@ object UList extends WebComponent with HasAccessibleName { protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-list") - lazy val accessibleRole: HtmlAttr[String] = htmlAttr("accessible-role", StringAsIsCodec) - lazy val busy: HtmlAttr[Boolean] = htmlAttr("busy", BooleanAsAttrPresenceCodec) - lazy val busyDelay: HtmlAttr[FiniteDuration] = htmlAttr("busy-delay", FiniteDurationCodec) - lazy val footerText: HtmlAttr[String] = htmlAttr("footer-text", StringAsIsCodec) - lazy val growing: HtmlAttr[ListGrowingMode] = htmlAttr("growing", ListGrowingMode.AsStringCodec) - lazy val headerText: HtmlAttr[String] = htmlAttr("header-text", StringAsIsCodec) - lazy val indent: HtmlAttr[Boolean] = htmlAttr("indent", BooleanAsAttrPresenceCodec) - lazy val mode: HtmlAttr[ListMode] = htmlAttr("mode", ListMode.AsStringCodec) - lazy val noDataText: HtmlAttr[String] = htmlAttr("no-data-text", StringAsIsCodec) - lazy val separators: HtmlAttr[ListSeparator] = htmlAttr("separators", ListSeparator.AsStringCodec) + lazy val accessibleRole: HtmlAttr[String] = htmlAttr("accessible-role", StringAsIsCodec) + lazy val loading: HtmlAttr[Boolean] = htmlAttr("loading", BooleanAsAttrPresenceCodec) + lazy val loadingDelay: HtmlAttr[FiniteDuration] = htmlAttr("loading-delay", FiniteDurationCodec) + lazy val footerText: HtmlAttr[String] = htmlAttr("footer-text", StringAsIsCodec) + lazy val growing: HtmlAttr[ListGrowingMode] = htmlAttr("growing", ListGrowingMode.AsStringCodec) + lazy val headerText: HtmlAttr[String] = htmlAttr("header-text", StringAsIsCodec) + lazy val indent: HtmlAttr[Boolean] = htmlAttr("indent", BooleanAsAttrPresenceCodec) + lazy val selectionMode: HtmlAttr[ListMode] = htmlAttr("selection-mode", ListMode.AsStringCodec) + lazy val noDataText: HtmlAttr[String] = htmlAttr("no-data-text", StringAsIsCodec) + lazy val separators: HtmlAttr[ListSeparator] = htmlAttr("separators", ListSeparator.AsStringCodec) + + @deprecated("busy property has been renamed to loading", since = "2.0.0") + def busy: HtmlAttr[Boolean] = loading + @deprecated("busyDelay property has been renamed to loadingDelay", since = "2.0.0") + def busyDelay: HtmlAttr[FiniteDuration] = loadingDelay + @deprecated("mode has been renamed to selectionMode") + def mode: HtmlAttr[ListMode] = selectionMode object events { val onItemClick = new EventProp[EventWithPreciseTarget[Ref] & HasDetail[HasItem[item.Ref]]]("item-click") @@ -89,7 +96,12 @@ object UList extends WebComponent with HasAccessibleName { def item: ListItem.type = ListItem def customItem: CustomListItem.type = CustomListItem - def group: UListGroupHeader.type = UListGroupHeader + def grouped = UListGroup + + @scala.annotation.compileTimeOnly( + "group has been replaced by grouped, and the structure of your list items now needs to be nested." + ) + def group = ??? def notificationItem: NotificationListItem.type = NotificationListItem def notificationGroup: NotificationListGroupItem.type = NotificationListGroupItem diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UListGroupHeader.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UListGroup.scala similarity index 69% rename from web-components/src/main/scala/be/doeraene/webcomponents/ui5/UListGroupHeader.scala rename to web-components/src/main/scala/be/doeraene/webcomponents/ui5/UListGroup.scala index d847278..25b5254 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UListGroupHeader.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UListGroup.scala @@ -14,11 +14,8 @@ import be.doeraene.webcomponents.ui5.eventtypes.{HasDetail, HasItem, HasTargetRe import be.doeraene.webcomponents.WebComponent /** The ui5-li-groupheader is a special list item, used only to separate other list items into logical groups. - * - * @see - * the doc for more information. */ -object UListGroupHeader extends WebComponent { +object UListGroup extends WebComponent { @js.native trait RawElement extends js.Object { @@ -26,7 +23,7 @@ object UListGroupHeader extends WebComponent { } @js.native - @JSImport("@ui5/webcomponents/dist/GroupHeaderListItem.js", JSImport.Default) + @JSImport("@ui5/webcomponents/dist/ListItemGroup.js", JSImport.Default) object RawImport extends js.Object // object-s are lazy so you need to actually use them in your code to prevent dead code elimination @@ -34,12 +31,14 @@ object UListGroupHeader extends WebComponent { type Ref = dom.html.Element & RawElement - protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-li-groupheader") + protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-li-group") - lazy val accessibleName: HtmlAttr[String] = htmlAttr("accessible-name", StringAsIsCodec) - lazy val selected: HtmlAttr[Boolean] = htmlAttr("selected", BooleanAsAttrPresenceCodec) + lazy val headerText: HtmlAttr[String] = htmlAttr("header-text", StringAsIsCodec) + lazy val headerAccessibleName: HtmlAttr[Boolean] = htmlAttr("header-accessible-name", BooleanAsAttrPresenceCodec) - object slots {} + object slots { + val header: Slot = Slot("header") + } object events {} diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UploadCollection.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UploadCollection.scala index 5631436..b24199f 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UploadCollection.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UploadCollection.scala @@ -44,12 +44,16 @@ object UploadCollection extends WebComponent { lazy val hideDragOverlay: HtmlAttr[Boolean] = htmlAttr("hide-drag-overlay", BooleanAsAttrPresenceCodec) - lazy val mode: HtmlAttr[ListMode] = htmlAttr("mode", ListMode.AsStringCodec) + lazy val selectionMode: HtmlAttr[ListMode.UploadCollectionMode] = + htmlAttr("selection-mode", ListMode.UploadCollectionMode.AsStringCodec) lazy val noDataDescription: HtmlAttr[String] = htmlAttr("no-data-description", StringAsIsCodec) lazy val noDataText: HtmlAttr[String] = htmlAttr("no-data-text", StringAsIsCodec) + @deprecated("mode property has been replaced by selectionMode") + def mode: HtmlAttr[ListMode.UploadCollectionMode] = selectionMode + object slots { val header: Slot = new Slot("header") } diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UploadCollectionItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UploadCollectionItem.scala index 3632b84..2f0dbd9 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UploadCollectionItem.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UploadCollectionItem.scala @@ -54,6 +54,9 @@ object UploadCollectionItem extends WebComponent { lazy val disableDeleteButton: HtmlAttr[Boolean] = htmlAttr("disable-delete-button", BooleanAsAttrPresenceCodec) + lazy val hideDeleteButton: HtmlAttr[Boolean] = + htmlAttr("hide-delete-button", BooleanAsAttrPresenceCodec) + lazy val fileName: HtmlAttr[String] = htmlAttr("file-name", StringAsIsCodec) diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ViewSettingsDialog.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ViewSettingsDialog.scala index 9567767..0d0b9f6 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ViewSettingsDialog.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ViewSettingsDialog.scala @@ -17,22 +17,25 @@ import be.doeraene.webcomponents.WebComponent /** The ui5-view-settings-dialog component helps the user to sort data within a list or a table. It consists of several * lists like Sort order which is built-in and Sort By and Filter By lists, for which you must be provide - * items(ui5-sort-item & ui5-filter-item respectively) These options can be used to create sorters for a table. The - * ui5-view-settings-dialog interrupts the current application processing as it is the only focused UI element and the - * main screen is dimmed/blocked. The ui5-view-settings-dialog is modal, which means that user action is required - * before returning to the parent window is possible. + * items(ui5-sort-item & ui5-filter-item respectively) These options can be used to create sorters for a table. * - * @see - * the doc for more - * information. + * The ui5-view-settings-dialog interrupts the current application processing as it is the only focused UI element and + * the main screen is dimmed/blocked. The ui5-view-settings-dialog is modal, which means that user action is required + * before returning to the parent window is possible. */ object ViewSettingsDialog extends WebComponent { @js.native trait RawElement extends js.Object { def setConfirmedSettings(settings: ViewSettings): Unit = js.native + } - def show(): Unit = js.native + object RawElement { + extension (rawElement: RawElement) { + @deprecated("The public show method has been replaced by using the open property", since = "2.0.0") + def show(): Unit = + rawElement.asInstanceOf[js.Dynamic].updateDynamic("open")(true) + } } @js.native @@ -47,6 +50,7 @@ object ViewSettingsDialog extends WebComponent { protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-view-settings-dialog") lazy val sortDescending: HtmlAttr[Boolean] = htmlAttr("sort-descending", BooleanAsAttrPresenceCodec) + lazy val open: HtmlAttr[Boolean] = htmlAttr("open", BooleanAsAttrPresenceCodec) object slots { val filterItems: Slot = Slot("filterItems") @@ -88,11 +92,13 @@ object ViewSettingsDialog extends WebComponent { } /** Feed an instance of [[ViewSettingsDialog]] ref to this observer in order to show it. */ - val showObserver: Observer[Ref] = Observer(_.show()) + @deprecated("showObserver has been replaced by using the open property", since = "2.0.0") + def showObserver: Observer[Ref] = Observer(_.show()) /** [[Mod]] showing the [[ViewSettingsDialog]] when the specified stream emits. */ + @deprecated("showFromEvents has been replaced by using the open property", since = "2.0.0") def showFromEvents(viewSettingsDialogShowEvents: EventStream[Unit]) = - inContext[ReactiveHtmlElement[Ref]](el => viewSettingsDialogShowEvents.mapTo(el.ref) --> showObserver) + open <-- viewSettingsDialogShowEvents.mapTo(true) /** Feed an instance of [[ViewSettingsDialog]] ref with the desired [[ViewSettings]] to set these to it. */ val setConfirmedSettingsObserver: Observer[(Ref, ViewSettings)] = Observer(_.setConfirmedSettings(_)) diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Wizard.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Wizard.scala index 2590f49..0a445e2 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Wizard.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Wizard.scala @@ -45,7 +45,14 @@ object Wizard extends WebComponent { trait StepChangeInfo extends js.Object { def step: WizardStep.Ref def previousStep: WizardStep.Ref - def changeWithClick: Boolean + def withScroll: Boolean + } + + object StepChangeInfo { + extension (info: StepChangeInfo) { + @deprecated("changeWithClick has been renamed to withScroll", since = "2.0.0") + def changeWithClick: Boolean = info.withScroll + } } val onStepChange: EventProp[EventWithPreciseTarget[Ref] & HasDetail[StepChangeInfo]] = new EventProp( diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/AvatarColorScheme.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/AvatarColorScheme.scala index d1bfb3a..411436f 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/AvatarColorScheme.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/AvatarColorScheme.scala @@ -5,56 +5,24 @@ package be.doeraene.webcomponents.ui5.configkeys * Available options are: Accent1 Accent2 Accent3 Accent4 Accent5 Accent6 Accent7 Accent8 Accent9 Accent10 Placeholder */ sealed trait AvatarColorScheme { - def value: String + def value: String = toString } object AvatarColorScheme extends EnumerationString[AvatarColorScheme] { - case object Accent1 extends AvatarColorScheme { - override def value: String = "Accent1" - } - - case object Accent2 extends AvatarColorScheme { - override def value: String = "Accent2" - } - - case object Accent3 extends AvatarColorScheme { - override def value: String = "Accent3" - } - - case object Accent4 extends AvatarColorScheme { - override def value: String = "Accent4" - } - - case object Accent5 extends AvatarColorScheme { - override def value: String = "Accent5" - } - - case object Accent6 extends AvatarColorScheme { - override def value: String = "Accent6" - } - - case object Accent7 extends AvatarColorScheme { - override def value: String = "Accent7" - } - - case object Accent8 extends AvatarColorScheme { - override def value: String = "Accent8" - } - - case object Accent9 extends AvatarColorScheme { - override def value: String = "Accent9" - } - - case object Accent10 extends AvatarColorScheme { - override def value: String = "Accent10" - } - - case object Placeholder extends AvatarColorScheme { - override def value: String = "Placeholder" - } - - def valueOf(value: AvatarColorScheme): String = value.toString + case object Accent1 extends AvatarColorScheme + case object Accent2 extends AvatarColorScheme + case object Accent3 extends AvatarColorScheme + case object Accent4 extends AvatarColorScheme + case object Accent5 extends AvatarColorScheme + case object Accent6 extends AvatarColorScheme + case object Accent7 extends AvatarColorScheme + case object Accent8 extends AvatarColorScheme + case object Accent9 extends AvatarColorScheme + case object Accent10 extends AvatarColorScheme + case object Placeholder extends AvatarColorScheme + + def valueOf(value: AvatarColorScheme): String = value.value val allValues: List[AvatarColorScheme] = deriveAllValues diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/BadgeDesign.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/BadgeDesign.scala deleted file mode 100644 index db66983..0000000 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/BadgeDesign.scala +++ /dev/null @@ -1,24 +0,0 @@ -package be.doeraene.webcomponents.ui5.configkeys - -import com.raquo.laminar.codecs.Codec -import scala.deriving.Mirror - -/** Defines the component design. - */ -sealed trait BadgeDesign - -object BadgeDesign extends EnumerationString[BadgeDesign] { - case object Set1 extends BadgeDesign - case object Set2 extends BadgeDesign - case object Set3 extends BadgeDesign - case object Neutral extends BadgeDesign - case object Information extends BadgeDesign - case object Positive extends BadgeDesign - case object Negative extends BadgeDesign - case object Critical extends BadgeDesign - - val allValues: List[BadgeDesign] = deriveAllValues - - def valueOf(value: BadgeDesign): String = value.toString - -} diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/BusyIndicatorSize.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/BusyIndicatorSize.scala index cd07c8a..ec3fe8e 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/BusyIndicatorSize.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/BusyIndicatorSize.scala @@ -6,12 +6,19 @@ sealed trait BusyIndicatorSize { object BusyIndicatorSize extends EnumerationString[BusyIndicatorSize] { - case object Small extends BusyIndicatorSize - case object Medium extends BusyIndicatorSize - case object Large extends BusyIndicatorSize + case object S extends BusyIndicatorSize + case object M extends BusyIndicatorSize + case object L extends BusyIndicatorSize + + @deprecated("Small has been renamed to S", since = "2.0.0") + def Small = S + @deprecated("Medium has been renamed to M", since = "2.0.0") + def Medium = M + @deprecated("Large has been renamed to L", since = "2.0.0") + def Large = L override def valueOf(value: BusyIndicatorSize): String = value.value - override val allValues: List[BusyIndicatorSize] = List(Small, Medium, Large) + override val allValues: List[BusyIndicatorSize] = deriveAllValues } diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/CarouselPageIndicatorStyle.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/CarouselPageIndicatorStyle.scala deleted file mode 100644 index 58e5d31..0000000 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/CarouselPageIndicatorStyle.scala +++ /dev/null @@ -1,16 +0,0 @@ -package be.doeraene.webcomponents.ui5.configkeys - -sealed trait CarouselPageIndicatorStyle { - def value: String = toString -} - -object CarouselPageIndicatorStyle extends EnumerationString[CarouselPageIndicatorStyle] { - - case object Default extends CarouselPageIndicatorStyle - case object Numeric extends CarouselPageIndicatorStyle - - val allValues: List[CarouselPageIndicatorStyle] = List(Default, Numeric) - - def valueOf(value: CarouselPageIndicatorStyle): String = value.value - -} diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/CarouselPageIndicatorType.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/CarouselPageIndicatorType.scala new file mode 100644 index 0000000..0852689 --- /dev/null +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/CarouselPageIndicatorType.scala @@ -0,0 +1,16 @@ +package be.doeraene.webcomponents.ui5.configkeys + +sealed trait CarouselPageIndicatorType { + def value: String = toString +} + +object CarouselPageIndicatorType extends EnumerationString[CarouselPageIndicatorType] { + + case object Default extends CarouselPageIndicatorType + case object Numeric extends CarouselPageIndicatorType + + val allValues: List[CarouselPageIndicatorType] = deriveAllValues + + def valueOf(value: CarouselPageIndicatorType): String = value.value + +} diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/ComboBoxFilter.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/ComboBoxFilter.scala index f68bf67..7c99ae1 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/ComboBoxFilter.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/ComboBoxFilter.scala @@ -8,10 +8,10 @@ object ComboBoxFilter extends EnumerationString[ComboBoxFilter] { /** Available options are: StartsWithPerTerm, StartsWith and Contains. */ case object StartsWithPerTerm extends ComboBoxFilter - case object StartsWith extends ComboBoxFilter - case object Contains extends ComboBoxFilter + case object StartsWith extends ComboBoxFilter + case object Contains extends ComboBoxFilter - val allValues: List[ComboBoxFilter] = List(StartsWithPerTerm, StartsWith, Contains) + val allValues: List[ComboBoxFilter] = deriveAllValues def valueOf(filter: ComboBoxFilter): String = filter.value } diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/EnumerationString.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/EnumerationString.scala index 6e27b0e..3b85eb4 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/EnumerationString.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/EnumerationString.scala @@ -12,7 +12,7 @@ trait EnumerationString[Value] { /* Helper method to derive all the values, in the simple (but ubiquitous) case where the Value type is an "enum" */ protected def deriveAllValues(using mirror: Mirror.Of[Value])(using tupleValue: EnumerationString.TupleValueOf[mirror.MirroredElemTypes] - )(using EnumerationString.AllSubtypesOf[mirror.MirroredElemTypes, Value]): List[Value] = + )(using EnumerationString.AllSubtypesOf[mirror.MirroredElemTypes, Value] =:= true): List[Value] = tupleValue.toListOf[Value] val allValues: List[Value] @@ -34,7 +34,7 @@ trait EnumerationString[Value] { object EnumerationString { case class TupleValueOf[T <: Tuple](value: T) { - def toListOf[Upper](using AllSubtypesOf[T, Upper]): List[Upper] = + def toListOf[Upper](using AllSubtypesOf[T, Upper] =:= true): List[Upper] = value.toArray.toList.map(_.asInstanceOf[Upper]) } @@ -45,16 +45,10 @@ object EnumerationString { ): TupleValueOf[Head *: Tail] = TupleValueOf(ev(head).fromProduct(EmptyTuple).asInstanceOf[Head] *: tail.value) - sealed trait AllSubtypesOf[T <: Tuple, Upper] - - object AllSubtypesOf { - given [Upper]: AllSubtypesOf[EmptyTuple, Upper] = new AllSubtypesOf {} - - given [Head, Tail <: Tuple, Upper](using - Head <:< Upper, - AllSubtypesOf[Tail, Upper] - ): AllSubtypesOf[Head *: Tail, Upper] = - new AllSubtypesOf {} + type AllSubtypesOf[T <: Tuple, Upper] <: Boolean = T match { + case EmptyTuple => true + case Upper *: rest => AllSubtypesOf[rest, Upper] + case _ => false } } diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/FCLLayout.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/FCLLayout.scala index bf81dac..144c782 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/FCLLayout.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/FCLLayout.scala @@ -6,27 +6,17 @@ sealed trait FCLLayout { object FCLLayout extends EnumerationString[FCLLayout] { - case object OneColumn extends FCLLayout - case object TwoColumnsStartExpanded extends FCLLayout - case object TwoColumnsMidExpanded extends FCLLayout - case object ThreeColumnsMidExpanded extends FCLLayout - case object ThreeColumnsEndExpanded extends FCLLayout + case object OneColumn extends FCLLayout + case object TwoColumnsStartExpanded extends FCLLayout + case object TwoColumnsMidExpanded extends FCLLayout + case object ThreeColumnsMidExpanded extends FCLLayout + case object ThreeColumnsEndExpanded extends FCLLayout case object ThreeColumnsStartExpandedEndHidden extends FCLLayout - case object ThreeColumnsMidExpandedEndHidden extends FCLLayout - case object MidColumnFullScreen extends FCLLayout - case object EndColumnFullScreen extends FCLLayout + case object ThreeColumnsMidExpandedEndHidden extends FCLLayout + case object MidColumnFullScreen extends FCLLayout + case object EndColumnFullScreen extends FCLLayout - override val allValues: List[FCLLayout] = List( - OneColumn, - TwoColumnsStartExpanded, - TwoColumnsMidExpanded, - ThreeColumnsMidExpanded, - ThreeColumnsEndExpanded, - ThreeColumnsStartExpandedEndHidden, - ThreeColumnsMidExpandedEndHidden, - MidColumnFullScreen, - EndColumnFullScreen - ) + override val allValues: List[FCLLayout] = deriveAllValues override def valueOf(value: FCLLayout): String = value.value diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/IconMode.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/IconMode.scala new file mode 100644 index 0000000..390ba4b --- /dev/null +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/IconMode.scala @@ -0,0 +1,17 @@ +package be.doeraene.webcomponents.ui5.configkeys + +sealed trait IconMode { + def value: String = toString +} + +object IconMode extends EnumerationString[IconMode] { + + case object Image extends IconMode + case object Decorative extends IconMode + case object Iteractive extends IconMode + + override val allValues: List[IconMode] = deriveAllValues + + override def valueOf(value: IconMode): String = value.value + +} diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/ListItemType.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/ListItemType.scala index 509ceff..3770f85 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/ListItemType.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/ListItemType.scala @@ -6,12 +6,12 @@ sealed trait ListItemType { object ListItemType extends EnumerationString[ListItemType] { - case object Active extends ListItemType - case object Inactive extends ListItemType - case object Detail extends ListItemType + case object Active extends ListItemType + case object Inactive extends ListItemType + case object Detail extends ListItemType case object Navigation extends ListItemType - val allValues: List[ListItemType] = List(Active, Inactive, Detail) + val allValues: List[ListItemType] = deriveAllValues def valueOf(value: ListItemType): String = value.value diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/ListMode.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/ListMode.scala index b6d30d2..5009b99 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/ListMode.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/ListMode.scala @@ -6,14 +6,28 @@ sealed trait ListMode { object ListMode extends EnumerationString[ListMode] { - case object None extends ListMode - case object SingleSelect extends ListMode - case object SingleSelectBegin extends ListMode - case object SingleSelectEnd extends ListMode - case object MultiSelect extends ListMode - case object Delete extends ListMode - - val allValues: List[ListMode] = List(None, SingleSelect, SingleSelectBegin, SingleSelectEnd, MultiSelect, Delete) + sealed trait UploadCollectionMode { self: ListMode => + def uploadCollectionModeValue = self.value + } + object UploadCollectionMode extends EnumerationString[UploadCollectionMode] { + def valueOf(value: UploadCollectionMode): String = value.uploadCollectionModeValue + val allValues = deriveAllValues + } + + case object None extends ListMode with UploadCollectionMode + case object Single extends ListMode with UploadCollectionMode + case object SingleSelectBegin extends ListMode with UploadCollectionMode + case object SingleSelectEnd extends ListMode with UploadCollectionMode + case object SingleSelectAuto extends ListMode with UploadCollectionMode + case object Multiple extends ListMode with UploadCollectionMode + case object Delete extends ListMode + + @deprecated("SingleSelect ListMode has been renamed to Single") + def SingleSelect: ListMode = Single + @deprecated("MultiSelect ListMode has been renamed to Multiple") + def MultiSelect: ListMode = Multiple + + val allValues: List[ListMode] = deriveAllValues def valueOf(value: ListMode): String = value.value diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/MessageStripDesign.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/MessageStripDesign.scala index 0fe2f79..0ba8e08 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/MessageStripDesign.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/MessageStripDesign.scala @@ -6,16 +6,14 @@ sealed trait MessageStripDesign { object MessageStripDesign extends EnumerationString[MessageStripDesign] { case object Information extends MessageStripDesign - case object Positive extends MessageStripDesign - case object Negative extends MessageStripDesign - case object Warning extends MessageStripDesign + case object Positive extends MessageStripDesign + case object Negative extends MessageStripDesign + case object Critical extends MessageStripDesign + + @deprecated("Warning MessageStripDesign was renamed to Critical", since = "2.0.0") + def Warning: MessageStripDesign = Critical override def valueOf(value: MessageStripDesign): String = value.value - override val allValues: List[MessageStripDesign] = List( - Information, - Positive, - Negative, - Warning - ) + override val allValues: List[MessageStripDesign] = deriveAllValues } diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/PopoverHorizontalAlign.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/PopoverHorizontalAlign.scala index d6745d5..d516569 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/PopoverHorizontalAlign.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/PopoverHorizontalAlign.scala @@ -6,12 +6,17 @@ sealed trait PopoverHorizontalAlign { } object PopoverHorizontalAlign extends EnumerationString[PopoverHorizontalAlign] { - case object Center extends PopoverHorizontalAlign - case object Left extends PopoverHorizontalAlign - case object Right extends PopoverHorizontalAlign + case object Center extends PopoverHorizontalAlign + case object Start extends PopoverHorizontalAlign + case object End extends PopoverHorizontalAlign case object Stretch extends PopoverHorizontalAlign - val allValues: List[PopoverHorizontalAlign] = List(Center, Left, Right, Stretch) + @deprecated("Left horizontal align has been renamed to Start", since = "2.0.0") + def Left = Start + @deprecated("Right horizontal align has been renamed to End", since = "2.0.0") + def Right = End + + val allValues: List[PopoverHorizontalAlign] = deriveAllValues def valueOf(value: PopoverHorizontalAlign): String = value.value } diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/PopoverPlacementType.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/PopoverPlacementType.scala index d5ffc4c..69e723d 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/PopoverPlacementType.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/PopoverPlacementType.scala @@ -6,12 +6,17 @@ sealed trait PopoverPlacementType { object PopoverPlacementType extends EnumerationString[PopoverPlacementType] { - case object Left extends PopoverPlacementType - case object Right extends PopoverPlacementType - case object Top extends PopoverPlacementType + case object Start extends PopoverPlacementType + case object End extends PopoverPlacementType + case object Top extends PopoverPlacementType case object Bottom extends PopoverPlacementType - val allValues: List[PopoverPlacementType] = List(Left, Right, Top, Bottom) + @deprecated("Left horizontal align has been renamed to Start", since = "2.0.0") + def Left = Start + @deprecated("Right horizontal align has been renamed to End", since = "2.0.0") + def Right = End + + val allValues: List[PopoverPlacementType] = deriveAllValues def valueOf(value: PopoverPlacementType): String = value.value diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/SegmentedButtonMode.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/SegmentedButtonMode.scala index 31ba021..ce1a86a 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/SegmentedButtonMode.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/SegmentedButtonMode.scala @@ -5,10 +5,15 @@ sealed trait SegmentedButtonMode { } object SegmentedButtonMode extends EnumerationString[SegmentedButtonMode] { - case object SingleSelect extends SegmentedButtonMode - case object MultiSelect extends SegmentedButtonMode + case object Single extends SegmentedButtonMode + case object Multiple extends SegmentedButtonMode - val allValues: List[SegmentedButtonMode] = List(SingleSelect, MultiSelect) + @deprecated("SingleSelect segmented button mode has been renamed to Single", since = "2.0.0") + def SingleSelect = Single + @deprecated("MultiSelect segmented button mode has been renamed to Multiple", since = "2.0.0") + def MultiSelect = Multiple + + val allValues: List[SegmentedButtonMode] = deriveAllValues def valueOf(value: SegmentedButtonMode): String = value.value } diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/TagDesign copy.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/TagDesign copy.scala new file mode 100644 index 0000000..b4219e0 --- /dev/null +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/TagDesign copy.scala @@ -0,0 +1,18 @@ +package be.doeraene.webcomponents.ui5.configkeys + +import com.raquo.laminar.codecs.Codec +import scala.deriving.Mirror + +/** Defines the component size. + */ +sealed trait TagSize + +object TagSize extends EnumerationString[TagSize] { + case object S extends TagSize + case object L extends TagSize + + val allValues: List[TagSize] = deriveAllValues + + def valueOf(value: TagSize): String = value.toString + +} diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/TagDesign.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/TagDesign.scala new file mode 100644 index 0000000..d47f5f7 --- /dev/null +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/TagDesign.scala @@ -0,0 +1,23 @@ +package be.doeraene.webcomponents.ui5.configkeys + +import com.raquo.laminar.codecs.Codec +import scala.deriving.Mirror + +/** Defines the component design. + */ +sealed trait TagDesign + +object TagDesign extends EnumerationString[TagDesign] { + case object Set1 extends TagDesign + case object Set2 extends TagDesign + case object Neutral extends TagDesign + case object Information extends TagDesign + case object Positive extends TagDesign + case object Negative extends TagDesign + case object Critical extends TagDesign + + val allValues: List[TagDesign] = deriveAllValues + + def valueOf(value: TagDesign): String = value.toString + +} diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/ValueState.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/ValueState.scala index 230a4ff..032c39b 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/ValueState.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/ValueState.scala @@ -7,11 +7,20 @@ sealed trait ValueState { object ValueState extends EnumerationString[ValueState] { case object None extends ValueState - case object Error extends ValueState - case object Warning extends ValueState - case object Success extends ValueState + case object Negative extends ValueState + case object Critical extends ValueState + case object Positive extends ValueState case object Information extends ValueState + @deprecated("Error value state has been renamed to Negative", since = "2.0.0") + def Error = Negative + + @deprecated("Warning value state has been renamed to Critical", since = "2.0.0") + def Warning = Critical + + @deprecated("Success value state has been renamed to Positive", since = "2.0.0") + def Success = Positive + val allValues: List[ValueState] = deriveAllValues def valueOf(value: ValueState): String = value.value diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/WrappingType.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/WrappingType.scala index 83108c8..43ace66 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/WrappingType.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/WrappingType.scala @@ -6,10 +6,10 @@ sealed trait WrappingType { object WrappingType extends EnumerationString[WrappingType] { - case object None extends WrappingType + case object None extends WrappingType case object Normal extends WrappingType - override val allValues: List[WrappingType] = List(None, Normal) + override val allValues: List[WrappingType] = deriveAllValues override def valueOf(value: WrappingType): String = value.value diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/deprecatedstuff.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/deprecatedstuff.scala new file mode 100644 index 0000000..31b571a --- /dev/null +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/configkeys/deprecatedstuff.scala @@ -0,0 +1,7 @@ +package be.doeraene.webcomponents.ui5.configkeys + +@deprecated("Badge has been renamed to Tag", since = "2.0.0") +def BadgeDesign = TagDesign + +@deprecated("CarouselPageIndicatorStyle has been renamed to CarouselPageIndicatorType") +lazy val CarouselPageIndicatorStyle = CarouselPageIndicatorType 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 new file mode 100644 index 0000000..1b7df94 --- /dev/null +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/deprecatedstuff.scala @@ -0,0 +1,9 @@ +package be.doeraene.webcomponents.ui5 + +@deprecated("Badge has been renamed to Tag", since = "2.0.0") +def Badge = Tag + +@scala.annotation.compileTimeOnly( + "UListGroupHeader has been replaced by UListGroup, and the structure of your list items now needs to be nested." +) +def UListGroupHeader = ??? diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/globals.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/globals.scala index 875e389..3052fcd 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/globals.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/globals.scala @@ -18,9 +18,8 @@ private[ui5] def used(any: Any): Unit = () @JSImport("@ui5/webcomponents-icons/dist/AllIcons.js", JSImport.Namespace) object AllIconsImport extends js.Object -@js.native -@JSImport("@ui5/webcomponents/dist/features/InputElementsFormSupport.js", JSImport.Namespace) -object InputElementsFormSupport extends js.Object +@deprecated("Form support is now natively supported, and does not require any import", since = "2.0.0") +def InputElementsFormSupport = new js.Object {} object FiniteDurationCodec extends Codec[FiniteDuration, String] { override def decode(domValue: String): FiniteDuration = domValue.toLong.millis @@ -34,10 +33,6 @@ case class ListCodec[A](codec: Codec[A, String]) extends Codec[List[A], String] def encode(scalaValue: List[A]): String = scalaValue.map(codec.encode).mkString(",") } -@js.native -@JSImport("@ui5/webcomponents/dist/features/InputElementsFormSupport.js", JSImport.Default) -object SubmitsSupport extends js.Object - @js.native @JSImport("@ui5/webcomponents-localization/dist/Assets.js", JSImport.Namespace) object Localization extends js.Object