durbok/noodl-docs
1
0
Fork 0
mirror of https://github.com/noodlapp/noodl-docs.git synced 2026-01-11 23:02:54 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: Upgrade Docusaurus from v2 to v3 (#52)

Browse Source 
* chore: Upgrade Docusaurus from v2 to v3

* chore: Update "Test build" GH workflow

* fix: build

All markdown is processed as MDX

* fix: Broken links
This commit is contained in:
Eric Tuvesson
2024-01-12 16:53:22 +01:00
committed by GitHub
parent 65b0cf0417
commit 656e5fc8d2
156 changed files with 4854 additions and 10445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
nodes/ui-controls/button/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Button node
---
<##head##>
{/*##head##*/}
# Button
@@ -23,7 +23,7 @@ The button has a <span className="ndl-signal">Click</span> signal that you can u
![](/nodes/ui-controls/button//button_node.png)
</div>
<##head##>
{/*##head##*/}
This control contains all logic such as accessibility etc. It can be styled in via it's properties.
Use variations to create different types of buttons
@@ -79,7 +79,7 @@ The main output for the button is the Click <span className="ndl-signal">signal<
| Signal | Description |
| ----------------------------------------- | ------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Click</span> | <##output:onClick##>A signal is sent on this output when the button is clicked.<##output##> |
| <span className="ndl-signal">Click</span> | {/*##output:onClick##*/}A signal is sent on this output when the button is clicked.{/*##output##*/} |
It also features a set of more in depth <span className="ndl-signal">signals</span>:

10
nodes/ui-controls/checkbox/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Checkbox node
---
<##head##>
{/*##head##*/}
# Checkbox
@@ -24,7 +24,7 @@ The checkbox will flip its state when clicked and its <span className="ndl-data"
</div>
<##head##>
{/*##head##*/}
This control contains all logic such as accessibility etc. It can be styled in via it's properties, or you can use it only for the logic and create your own checkbox component in your own design system.
@@ -42,8 +42,8 @@ The main input of the Checkbox node is the <span className="ndl-data">Checked</s
| Data | Description |
| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <span className="ndl-data">Checked</span> | <##input:checked##>A boolean setting the checkbox in "checked" or "unchecked" state. This is the value of the checkbox and can be connected to a data source.<##input##> |
| <span className="ndl-data">Background Color</span> | <##input:backgroundColor##>The background color when the checkbox is "checked"<##input##>. |
| <span className="ndl-data">Checked</span> | {/*##input:checked##*/}A boolean setting the checkbox in "checked" or "unchecked" state. This is the value of the checkbox and can be connected to a data source.{/*##input##*/} |
| <span className="ndl-data">Background Color</span> | {/*##input:backgroundColor##*/}The background color when the checkbox is "checked"{/*##input##*/}. |
</div>
@@ -116,7 +116,7 @@ The main output of the Checkbox node is the <span className="ndl-data">Checked</
| Data | Description |
| ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Checked</span> | <##output:checked##>A boolean output that is true when this checkbox control is checked and false if not. This is useful when using this control as a base for your own component that will represent visually that it is checked.<##output##> |
| <span className="ndl-data">Checked</span> | {/*##output:checked##*/}A boolean output that is true when this checkbox control is checked and false if not. This is useful when using this control as a base for your own component that will represent visually that it is checked.{/*##output##*/} |
</div>

12
nodes/ui-controls/dropdown/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Dropdown node
---
<##head##>
{/*##head##*/}
# Dropdown
@@ -51,14 +51,14 @@ The mapping can be achieved through `Value: function (object) { return object.id
</div>
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Items</span> | <##input:item##>This input takes an **Array** of **Objects** that will populate the **Dropdown**. You should make sure that they have the two properties `Label` and `Value` set as they are used to represent the item in the **Dropdown**.<##input##> |
| <span className="ndl-data">Value</span> | <##input:value##>Setting this input will force the **Dropdown** to select the item with the same value set in its `Value` property.<##input##> |
| <span className="ndl-data">Items</span> | {/*##input:item##*/}This input takes an **Array** of **Objects** that will populate the **Dropdown**. You should make sure that they have the two properties `Label` and `Value` set as they are used to represent the item in the **Dropdown**.{/*##input##*/} |
| <span className="ndl-data">Value</span> | {/*##input:value##*/}Setting this input will force the **Dropdown** to select the item with the same value set in its `Value` property.{/*##input##*/} |
| <span className="ndl-data">Placeholder</span> | The placeholder text for when the dropdown is empty. |
| <span className="ndl-data">Placeholder Opacity</span> | The opacity of the placeholder text. `0` is completely transparent and invisible. `1` is completely solid and opaque. |
@@ -89,11 +89,11 @@ The main output is the following:
| Data | Description |
| --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Value</span> | <##output:value##>This output holds the value, i.e. what is in the property `Value` in the currently selected **Object** in the Dropdown.<##output##> |
| <span className="ndl-data">Value</span> | {/*##output:value##*/}This output holds the value, i.e. what is in the property `Value` in the currently selected **Object** in the Dropdown.{/*##output##*/} |
| Signal | Description |
| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Changed</span> | <##output:changed##>This signal signal is emitted when the selection of the **Dropdown** changes.<##output##> |
| <span className="ndl-data">Changed</span> | {/*##output:changed##*/}This signal signal is emitted when the selection of the **Dropdown** changes.{/*##output##*/} |
It also features a set of more in depth <span className="ndl-signal">signals</span>:

4
nodes/ui-controls/radio-button-group/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Radio Button Group node
---
<##head##>
{/*##head##*/}
# Radio Button Group
@@ -24,7 +24,7 @@ The output of the <span className="ndl-node">Radio Button Group</span> node is t
</div>
<##head##>
{/*##head##*/}
## Inputs

4
nodes/ui-controls/radio-button/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Radio Button node
---
<##head##>
{/*##head##*/}
# Radio Button
@@ -24,7 +24,7 @@ You must specify a unique <span className="ndl-data">Value</span> for each <span
</div>
<##head##>
{/*##head##*/}
The core radio button has a very simple visual appearance and is most often used in other components as part of a design system. This control contains all logic such as accessibility etc. It can be styled in via it's properties, or you can use it only for the logic and create your own radio button component in your own design system.

4
nodes/ui-controls/repeater-item/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Repeater Item node
---
<##head##>
{/*##head##*/}
# Repeater Item
@@ -16,7 +16,7 @@ This node contains a set of useful utilities for components that have been dynam
</div>
<##head##>
{/*##head##*/}
## Inputs

14
nodes/ui-controls/repeater/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Repeater node
---
<##head##>
{/*##head##*/}
# Repeater
@@ -24,7 +24,7 @@ The <span className="ndl-node">Repeater</span> node takes data from a Noodl <spa
</div>
<##head##>
{/*##head##*/}
More details can be found in the [guide](/docs/guides/data/list-basics).
@@ -35,11 +35,11 @@ More details can be found in the [guide](/docs/guides/data/list-basics).
| <span className="ndl-data">Template Type</span> | This input is used to enable or disable dynamic templates. The input can be:<br/><br/>`Explicit`: The same _Component_ will be used for all items.<br/>`Dynamic`: Use code to choose what _Component_ to create for each item. In this case you will have to set the **Script** input. |
| <span className="ndl-data">Script</span> | Available when **Template Type** is set to **Dynamic** or after chosing a _Component_ for a **Explicit** template type . Write a script to map input or choose what Component to create for every item (see below). |
| <span className="ndl-data">Component</span> | Only available when **Template Type** is set to **Explicit**. Choose a component from your project that will be used as template to dynamically create component instances for each object in the Items array. |
| <span className="ndl-data">Items</span> | <##input:items##>An array of [Objects](/nodes/data/object/object-node) or [Records](/nodes/data/cloud-data/record) that will be used to dynamically create components.<##input##> |
| <span className="ndl-data">Items</span> | {/*##input:items##*/}An array of [Objects](/nodes/data/object/object-node) or [Records](/nodes/data/cloud-data/record) that will be used to dynamically create components.{/*##input##*/} |
| Signal | Description |
| ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Refresh</span> | <##input:refresh##>By sending a signal to this input all items in the **Repeater** will be removed and then recreated.<##input##> |
| <span className="ndl-signal">Refresh</span> | {/*##input:refresh##*/}By sending a signal to this input all items in the **Repeater** will be removed and then recreated.{/*##input##*/} |
### Script
@@ -82,13 +82,13 @@ In the example above the script looks at the property "type" of each object, and
| Data | Description |
| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Item Id</span> | <##output:itemActionItemId##>This output will be updated every time a signal is sent on any of the component output signals to reflect the **Id** of the related [Object](/nodes/data/object/object-node) or [Record](/nodes/data/cloud-data/record/) that triggered the signal.<##output##> |
| <span className="ndl-data">Item Id</span> | {/*##output:itemActionItemId##*/}This output will be updated every time a signal is sent on any of the component output signals to reflect the **Id** of the related [Object](/nodes/data/object/object-node) or [Record](/nodes/data/cloud-data/record/) that triggered the signal.{/*##output##*/} |
| <span className="ndl-data">Item Outputs</span> | This group contains component outputs other than signals for the component template of the **Repeater** node. When a signal is triggered by one of the component instances the outputs will be replayed along with the _Item Id_ of the corresponding item. This can be used to store component specific outputs in e.g. objects and variables. |
<span className="hidden-props-for-editor"><##output:itemOutput-\*##>An output value coming from the list item.<##output##></span>
<span className="hidden-props-for-editor">{/*##output:itemOutput-\*##*/}An output value coming from the list item.{/*##output##*/}</span>
| Signal | Description |
| ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Item Signals</span> | This group contains component output signals from the component template of the **Repeater** node. When any of the component instances triggers an output signal, these will be relayed by the **Repeater** node along with the corresponding **Item Id**. |
<span className="hidden-props-for-editor"><##output:itemOutputSignal-\*##>An output signal coming from the list item.<##output##></span>
<span className="hidden-props-for-editor">{/*##output:itemOutputSignal-\*##*/}An output signal coming from the list item.{/*##output##*/}</span>

4
nodes/ui-controls/slider/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Slider node
---
<##head##>
{/*##head##*/}
# Slider
@@ -24,7 +24,7 @@ The <span className="ndl-node">Slider</span> node allows you to set a <span clas
</div>
<##head##>
{/*##head##*/}
## Inputs

4
nodes/ui-controls/text-input/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Text Input node
---
<##head##>
{/*##head##*/}
# Text Input
@@ -24,7 +24,7 @@ The captured value can easily be connected to other nodes in a project.
</div>
<##head##>
{/*##head##*/}
## Inputs