eclipse / eclipsefuro-web

Enterprise ready set of web components which work best with Eclipse Furo. Comes with minimal footprint. Based on web standards. Future proved. Compliant with any technology of choice.

フロー Furo Webcomponents

Enterprise ready set of web components which work best with Eclipse Furo. Comes with minimal footprint. Based on web standards. Future proved. Compliant with any technology of choice.

Commit style

We have activated conventionalCommits in the lerna config. ConventionalCommits is a specification for adding human and machine readable meaning to commit messages.

Quick start

Note: This guide assumes you have npm installed locally.

First run npm run bootstrap

Then run npm run serve, this will start a server http://127.0.0.1:7777

Warning ! do never run npm install

Commands

npm run bootstrap

Bootstraps the project (lerna,...) and links the packages

eclipsefuro-web's Issues

Proper UI5 Theming Solution and CSS style var handling

To avoid a chaotic css style var handling and to easy manage all the different themes, we need a solution to organise all the CSS stylevars in a named theme.

There are solutions from SAP but we have to think over this concepts.

https://sap.github.io/ui5-webcomponents/playground/docs/configuration/
https://sap.github.io/ui5-webcomponents/playground/docs/customtheming/

Existing style vars in components should be reviewed and adjusted. E.g. --primary, --on-primary only in Google Material Design System packages.

The goal is to provide two separated style var concepts. One for Google Material and one for SAP Fiori (@furo/ui5)

Wrong tag names

furo-ui5-data-segmented-button
wrong child tag name

With SAP Ui5 1.0.0-RC-15 the tag names of several components will change. Currently the RC-14 is in use.

Function that returns all validity message of a data object

validateAllFields()
The function validateAllFields() now not only returns the data object, but also a list with all validation messages. This list can be used for an error overview.

events

• furo-data-object at-validation-success
• furo-data-object at-validation-failed

new event structure:
{ data: DATAMODEL, field_violations: VALIDITY_MESSAGES }

Update package @furo/ui5 to SAP Ui5 v1.0.0-rc.15

The latest version of the SAP UI5 package is v1.0.0-rc.15. The @furo/ui5 package should depend on this version.

FuroUi5DataSelect, options update can lead to duplicate entries

An options update can lead to duplicate entries in the furo-ui5-data-select component. In addition, the selection is lost with an active field binding.

To Reproduce
<furo-ui5-data-select flex ƒ-bind-data="--entity(*.data.description)" ƒ-bind-options="--collection(*.entities)" id-field-path="data.id" display-field-path="data.display_name" value-field-path="data.id" value-state="Information" > <ui5-option data-id="">Options not yet available</ui5-option> <div slot="valueStateMessage"> Information message. This furo-ui5-data-select has an active field binding. When the user selects a value, the value-changed event is fired (Payload: ui5-option element or object from the option list) and the value is set to the bound field. </div> </furo-ui5-data-select>

1. Reload the options
2. The existing value binding is lost
3. The first option item is selected

Expected behavior
It should not matter when the options are loaded or reloaded. An existing field binding should remain and the correct option should be selected.

Furo Web 2.0

Furo Web 2.0
Currently, there is no clear separation of presentation logic components and visual components in the component packages.

Furo Web 2.0 as a core package should only provide components for the presentation logic (no visualisations).

All visual components are delivered in a separate package according to the corresponding design system. I.e. there are UI integration packages for

SAP UI5
Google Material
IBM Carbon (later)

This restructuring means that Furo Web 2.0 can be used in a completely framework-agnostic way. It will then be possible to use a standard UI framework on top of Furo Web 2.0.

FuroUi5DataNumberInput (v1), stores number values in quotes instead of numbers

Describe the bug
Number values are stored in quotes (i.e. "250.50") instead of 250.50

Expected behavior
The data model should respect the data type of the field.

Affected version
Branch v1

furo-type-renderer.js

Bug-Report with a suggestion to implement for 'eclipsefuro-web/packages/furo-data-ui/src/furo-type-renderer.js'

``Describe the bug
Elements do not disappear when used inside a template / flow-repeat.

To Reproduce
I created my own type-renderer based on yours and had some problems when using the typerenderer inside a template.
When the ƒ-inject-items was triggered additional fields where displayed because the old ones where not removed.

Expected behavior
I would recommend to add a disconnectedCallback() then the old fields are removed from the templates.

Sample-Code:

disconnectedCallback() {
   super.disconnectedCallback();
   if (this.defaultElement) {
      this.defaultElement.remove();
   }
}

Providing JavaScript modules alongside the web components to work with data models and API agents

Status Quo
Furo Web relies mainly on the web component standard. Currently, it is difficult to implement pure JavaScript integration on the data models and API agents.

JavaScript modules
It is desirable that there is an easy-to-use API for the integration of the models and API agents. This is provided as a JavaScript module.
The existing web components should also use this API.

Business Value
The APIs to the models and API agents enable seamless integration of any front-end technology.

Rework Eclipse Furo Web Component Demo Pages

FuroUi5TextInput, bindable suggestions and search event

The furo-ui5-text-input should be able to receive a RepeaterNode. Additionally, we want to establish a new event "search".

Use case:
We have a bindable text input field with lazy loaded suggestion items.

FuroDataObject, FieldNodes with proto oneOf specification

All oneOf FieldNodes are undefined
The setValue function does not check whether data are delivered. Therefore, all oneOf fields are always set to undefined.

To Reproduce
Steps to reproduce the behavior:

1. Create a set of fields with the proto annotation
   __proto: number: 3 oneOf: oneof_group_name
2. Create furo-data-object
3. Inject data (only one field of the oneOf set has data)
4. Check the oneOf fields

Expected behavior
Only one FieldNode of the oneOf Definition should have data.
If you set data to another oneOf Field, every other oneOf field should set to undefined.

Elaboration of Getting Started Guide

Users who belong to the target group of the Furo Web Stack should be able to create a minimal executable example within a maximum of 30 minutes.

We also need descriptions of the core concepts including examples.

FuroUi5DataProperty, change to type specific renderer with context

The component furo-ui5-data-property should use the type specific render pattern. The component should:

• render single type.Property with label form meta information
• render repeated type.Property with label from meta information
• be usable inside of every container (e.g. furo-form-layouter)

Extend the fieldnode with a `ValidatorEnumTypes`

It would be a nice feature, when the FieldNode would check enum types for validity and set the value to 0 on invalid entries.

New component, furo-hateoas-state

furo-hateoas-state is an invisible container with a binding of type furo.Link. The component controls the child elements based on the Hateoas relation information.

functions:
ƒ-enable
ƒ-disable

attributes on child elements:
rel=""
hide-no-rel
disable-no-rel

New component, FuroUi5Combobox

Support of the ui5-combobox with FURO bindings.

FieldNode, default values for numeric, string and bool types

Default values
When a message is parsed, if the encoded message does not contain a particular singular element, the corresponding field in the parsed object is set to the default value for that field. These defaults are type-specific:

For strings, the default value is the empty string.
For bools, the default value is false.
For numeric types, the default value is zero.

Removing the fixed names for links and meta

Describe the bug
Currently, the system assumes fixed naming for HATEOAS links and metadata in many places.

fields: {
  links: {type: furo.Link},
  meta: {type: furo.Meta}
}

Expected behavior
We would like to break away from this and allow that no naming conventions need to be considered when specifying the models. Or rather, it should be possible to use one's own customary designations, such as _links or _meta.

First steps
Analysis and search of the affected source code lines

• FieldNode
• RepeaterNode
• EntityAgent
• CollectionAgent
• CustomMethod
• DataObject
• ...

<furo-data-number-input> with step="0.01"

Hello Team

Describe the bug
I use with step="0.01" defined in my specs. Datatype is float.
I get some wrong error-messages unter my input-field when i enter for example 2.2
but 2.1 is working properly. I think there is a problem with the floating numbertype and im not sure how to fix this problem.

Do you have the same p problems in your webapps or maybe use only for int-types?

How can i solve this problem?

To Reproduce
Steps to reproduce the behavior:

1. Create a filed
2. Add step="0.01"
3. Use Arrow-Up to increase the value.
4. Now you should see some error messages right under the input-field.

Expected behavior
When i use a floating type and define a step on this -filed i expect the field to be validated propperly or maybe to use the step option without any validation-messages.

Screenshots

Input-Field with value 2.1 (no error)

Input-Field with value 2.2 (with error)

Spec-definition:

Input-field definition

Webapp package.json

Desktop (please complete the following information):

• OS: macOS Catalina Version 10.15.7
• Chrome
• Version (Google Chrome ist auf dem neuesten Stand)
  Version 92.0.4515.131 (Offizieller Build) (x86_64)

Additional context
I use the npm import
"dependencies": {
"@furo/collection": "^1.3.82",
"@furo/ui-builder": "^1.7.4",
"lit-element": "^2.4.0"
}

Ui5 Input Fields, setting valueStateMessage from the default resource bundles

Describe the bug
The NumberInputValidator sets an empty value state message in the Integer-Check function. That is correct, because there is no internationalisation functionality available. The correct message will be set from the ui5 input itself.

Unfortunately, this only happens after the second time. I.e. an empty error field appears during the first validation.

Screenshots

Expected behavior
The correct message is set.

Affected versions

• v1

Input fields with bound field node of type furo.fat.String and labels = empty:true should show empty string

Faulty behaviour
If you transmit a furo.fat.String type with no value set but the attribute "labels" with empty:true is present, the input shows "undefinded"

To Reproduce
Dataset:
"data": {
"@type": "xxx/furo.fat.String",
"labels": {"empty": true}
},

Expected behavior
The input field should be empty (value='')

Versions

• 0.47.4 and higher

Implement contextual renderers for cell and celledit

all display context renderers must be available as cell renderer too

Extension of the type testing

Describe the bug
Currently, only the constraints are checked during the general field inspection.
We would like to extend the check so that no marshalling errors occur when the data is transmitted to the backend.

To Reproduce
Steps to reproduce the behavior:

1. you need a field of type Integer
2. transmit a non-integer value i.e. 12.25
3. you will get a protobuf error
4. {"code":3,"message":"proto: (line 1:48): invalid value for int32 type: 12.25"}

Expected behavior
we want to have a Integer type test on the client side.

Screenshots

furo-type-renderer: Wrong component name resolving

Current name resolving
.replace(/.*\//, '') .replaceAll('.', '-') .toLocaleLowerCase()};`

This method does not take into account that package names of types with _ exist.

To Reproduce
Use the furo-type-renderer with the following types;

• @type: "type.googleapis.com/company.validation_messages.ValidationMessageWarning"

Expected behavior
The name resolution should also replace _ with -

FuroFeatureToggle, Switching due to custom attributes

Custom attributes
The extension shall allow a custom attribute with value to be passed via a data-furo-toggle-custom-add, data-furo-toggle-remove.

- `data-furo-toggle-custom-add` Adds the custom attribute to the element on true state of the key, removes the attribute on false state
- `data-furo-toggle-custom-remove` Removes the custom attribute from the element on true state of the key, adds the attribute on false state

Document the stylevars with jsdoc tags

The stylevars are documented as markdown in the head section.
`* Custom property | Description | Default | Fallback

• ----------------|-------------|----------|----------
• --furo-form-layouter-row-gap | width of row gap | 0px | --
• --furo-form-layouter-column-gap | width of column gap | 0px | --`

The analysers can consume JSDoc tags @cssprop for that. This is much easier to do and a preparation for the code completion.

Document the available slots

We had no possibility to document the slots of a component.
The analyzers can handle them now and the custom-elements-manifest have them too.

• @slot - This is an unnamed slot (the default slot)
• @slot start - This is a slot named "start".
• @slot end