🕸️ @totallyinformation/web-components: v1.3.1 release 2025-06-09

Share Your Projects
1

Hi again - a new release of the Totally Information web components package today for your pleasure.

Links: npm, GitHub.

These are not specific to Node-RED or to UIBUILDER and all of the components will work without either. However, some of them do have UIBUILDER enhancements. But you should be able to equally use them with http-in/template/http-response nodes and even with either version of Dashboard.

If you want to use them with UIBUILDER, simply add @totallyinformation/web-components via uibuilder's library manager. If you want to use them without installation, they can be used direct from JSDELIVR.

Previous release

Main things in this release:

  • New h1-title component that takes the <title> tag from the page and creates an on-page <h1> heading with an optional sub-heading.
  • Some significant re-organisation to make future development easier.
  • Documentation updates for the data-list component. Showing how to use nested lists and adding a Node-RED flow demonstrating use with UIBUILDER.

v1.3.1

  • Fix documentation - no status box for pages with no status front matter.

  • Fix test/demo index page - h1-title is live.

v1.3.0

Test/demo pages

  • Re-organised into sub-folders for experiments, alpha, beta and live components.

  • New experimental pages.

NEW h1-title component

A simple component that uses the page's <title> tag as the main heading for the page.

Any slot content is added as a sub-heading with italic, slightly smaller text.

data-list component

  • Updated documentation and demo/test page to illustrate how to use the nested-list class and data-depth attribute to style nested lists.

  • Improved warning/error messages - all prefixed with data-list: and the instance id.

  • Added Node-RED flow example to the documentation to illustrate how to use the data-list component with UIBUILDER for Node-RED.

Default styling

  • uib-brand.css has beeen updated to version 2025-06-09 in line with UIBUILDER for Node-RED.

Base component

  • NEW hasSlotContent() method added. This allows you to check if the components slot has any content from the light DOM. This is useful for components that may or may not have such content and where you want to apply different styles or behaviour based on that.

General development

  • New script to create new components along with their documentation and test/demo pages. npm run new-component or npm run new-component my-component.
1 Like