Bindings explorer panel #15403
Bindings explorer panel #15403
Conversation
…ase into bindings-panel
…ase into bindings-panel
|
QA Wolf here! As you write new code it's important that your test coverage is keeping up. |
| @@ -80,7 +80,7 @@ | |||
| "dayjs": "^1.10.8", | |||
| "easymde": "^2.16.1", | |||
| "svelte-dnd-action": "^0.9.8", | |||
| "svelte-portal": "^1.0.0" | |||
| "svelte-portal": "^2.2.1" | |||
There was a problem hiding this comment.
Bumping as the new version contains types which makes life much easier.
| Info = "info", | ||
| Positive = "positive", | ||
| Negative = "negative", | ||
| } |
There was a problem hiding this comment.
We need to export enums from .ts file to avoid linting errors. There's a configuration issue with eslint, typescript and svelte right now that will cause linting errors if exporting from a svelte component directly. This is a clean solution.
| export let customHeight: string | undefined = undefined | ||
| export let animate: boolean = true | ||
| export let customZIndex: number | undefined = undefined | ||
| export let handlePositionUpdate: Function | undefined = undefined |
There was a problem hiding this comment.
Both customZIndex and handlePositionUpdate are also just casing and typo fixes, which required updating a few files in the builder.
| instance = render(AISettings, {}) | ||
| const modalContainer = document.createElement("div") | ||
| modalContainer.classList.add("modal-container") | ||
| instance.baseElement.appendChild(modalContainer) |
There was a problem hiding this comment.
We need to create and append the modal container node during testing now, as it looks like the behaviour of svelte-portal as changed in the new verison. Previously I assume it would silently fall back to using the document, but now it throws an error if the configured target does not exist in the DOM.
…ase into bindings-panel
Description
This PR adds a new panel to explore available bindings for the selected component.
Also contains typescriptification of a few BBUI components, BBUI utils and builder components.
Example of the colours of all possible data types:
You can dig in to all the available bindings, including going deep into complex structures - letting you see the full extent of the data available to you.
Interactions:
{{ Data provider.Rows.0.Price }}. This can then be pasted into a binding drawer for example.Worth noting that this change also removes the title and add component button from the components tab. The only way to add components is now using the add component FAB in the preview (or ctrl/cmd + enter).
Addresses
Feature branch env
Feature Branch Link