https://github.com/cloudblue/connect-ui-toolkit
UI Toolkit to build between others extensions for CloudBlue Connect
https://github.com/cloudblue/connect-ui-toolkit
Last synced: 2 months ago
JSON representation
UI Toolkit to build between others extensions for CloudBlue Connect
- Host: GitHub
- URL: https://github.com/cloudblue/connect-ui-toolkit
- Owner: cloudblue
- License: apache-2.0
- Created: 2022-06-15T07:07:12.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2025-02-12T08:44:51.000Z (over 1 year ago)
- Last Synced: 2025-03-13T06:34:35.541Z (over 1 year ago)
- Language: JavaScript
- Size: 27.9 MB
- Stars: 9
- Watchers: 7
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Connect UI Toolkit
---
Build your Connect Extension UI easily with our UI Toolkit. Feel free to use any frontend library
or framework you prefer!
## Installation
### Minimalistic via CDN
Just plug a module via `script` tag, import default exported function and call it. You're good.
N.B.: For development mode - by default `` will be `http://localhost:3003`
```html
import createApp from '<path>';
createApp();
```
This will implement minimalistic interaction with parent Connect Application.
## Usage
### Use widgets
1. Import required widget from named exports
2. Pass a configuration Object to `createApp` function as an argument
3. Configuration object should contain desired tag name as a `key` and widget descriptor object as a `value`. N.B.: widget name should contain at least one "-"
```html
import createApp, { Card } from '<path>';
createApp({
'my-card': Card,
});
...
My content here...
```
Control widgets using attributes (see widgets documentation)
### Interaction with parent app
We implemented two ways to interact with parent application - one is data-based, another events-based.
You will find supported data properties and handled events list in slot's documentation.
Let's see how you can use it to build your app:
### Data-based interface with `watch/commit`
If some data-based interface is documented for particular slot
you may subscribe on it using `watch` method or publish changes using `commit`
```html
import createApp from '<path>';
const app = createApp();
app.watch('observed', (value) => {
/* handle "observed" property change here */
});
app.commit({
observed: /* Desired "observed" value here */,
});
```
Use `watch('observed', (value) => { ... })` to watch `observed` property
Use `watch('*', (all) => { ... })` or just `watch((all) => { ... })` to watch all provided
properties at once
Use `commit({ observed: 'ABC' })` to commit values that you want to be sent to parent app.
**N.B.: Only expected properties will be processed. Anything unexpected will be omitted**
**N.B.2: Due to security reasons this tool supports only simple values - like Strings, Numbers and Booleans (in depth too).
Functions, Dates etc. will not work.**
### Events-based interface with `listen/emit`;
```html
import createApp from '<path>';
const app = createApp();
app.emit('openDialog', {
title: 'Lorem Ipsum',
description: 'Dolor sit amet',
});
app.listen('dialog:confirmed', () => {
/* handle parent app dialog confirmation */
});
```