mirror of
https://github.com/lowdefy/lowdefy.git
synced 2025-02-23 14:39:32 +08:00
Merge branch 'develop' into docs
This commit is contained in:
commit
6fb9b42bbc
@ -1,7 +1,9 @@
|
||||
{
|
||||
"valueType": "string",
|
||||
"category": "input",
|
||||
"loading": false,
|
||||
"loading": {
|
||||
"type": "SkeletonInput"
|
||||
},
|
||||
"test": {
|
||||
"validation": true,
|
||||
"required": true
|
||||
|
@ -1,6 +1,8 @@
|
||||
{
|
||||
"category": "display",
|
||||
"loading": false,
|
||||
"loading": {
|
||||
"type": "SkeletonButton"
|
||||
},
|
||||
"schema": {
|
||||
"properties": {
|
||||
"type": "object",
|
||||
@ -8,7 +10,8 @@
|
||||
"properties": {
|
||||
"block": {
|
||||
"type": "boolean",
|
||||
"description": "Fit the button's span to its parent container span."
|
||||
"description": "Fit the button's span to its parent container span.",
|
||||
"default": false
|
||||
},
|
||||
"color": {
|
||||
"type": "string",
|
||||
@ -19,19 +22,23 @@
|
||||
},
|
||||
"danger": {
|
||||
"type": "boolean",
|
||||
"description": "Set button style to danger."
|
||||
"description": "Set button style to danger.",
|
||||
"default": false
|
||||
},
|
||||
"disabled": {
|
||||
"type": "boolean",
|
||||
"description": "Disable the button if true."
|
||||
"description": "Disable the button if true.",
|
||||
"default": false
|
||||
},
|
||||
"ghost": {
|
||||
"type": "boolean",
|
||||
"description": "Make the button's background transparent when true."
|
||||
"description": "Make the button's background transparent when true.",
|
||||
"default": false
|
||||
},
|
||||
"hideTitle": {
|
||||
"type": "boolean",
|
||||
"description": "Hide the button's title."
|
||||
"description": "Hide the button's title.",
|
||||
"default": false
|
||||
},
|
||||
"href": {
|
||||
"type": "string",
|
||||
|
@ -1,7 +1,9 @@
|
||||
{
|
||||
"valueType": "any",
|
||||
"category": "input",
|
||||
"loading": false,
|
||||
"loading": {
|
||||
"type": "SkeletonInput"
|
||||
},
|
||||
"test": {
|
||||
"validation": true,
|
||||
"required": true
|
||||
@ -19,7 +21,10 @@
|
||||
},
|
||||
"color": {
|
||||
"type": "string",
|
||||
"description": "Selected button color."
|
||||
"description": "Selected button color.",
|
||||
"docs": {
|
||||
"displayType": "color"
|
||||
}
|
||||
},
|
||||
"disabled": {
|
||||
"type": "boolean",
|
||||
@ -28,7 +33,10 @@
|
||||
},
|
||||
"inputStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to input."
|
||||
"description": "Css style to applied to input.",
|
||||
"docs": {
|
||||
"displayType": "style"
|
||||
}
|
||||
},
|
||||
"options": {
|
||||
"type": "array",
|
||||
@ -78,6 +86,9 @@
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"docs": {
|
||||
"displayType": "optionsSelector"
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
@ -136,6 +147,9 @@
|
||||
"type": "object",
|
||||
"description": "Css style to applied to label feedback."
|
||||
}
|
||||
},
|
||||
"docs": {
|
||||
"displayType": "label"
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
|
@ -1,7 +1,9 @@
|
||||
{
|
||||
"valueType": "array",
|
||||
"category": "input",
|
||||
"loading": false,
|
||||
"loading": {
|
||||
"type": "SkeletonInput"
|
||||
},
|
||||
"test": {
|
||||
"validation": true,
|
||||
"required": true
|
||||
@ -13,7 +15,10 @@
|
||||
"properties": {
|
||||
"color": {
|
||||
"type": "string",
|
||||
"description": "Selected checkbox color."
|
||||
"description": "Selected checkbox color.",
|
||||
"docs": {
|
||||
"displayType": "color"
|
||||
}
|
||||
},
|
||||
"disabled": {
|
||||
"type": "boolean",
|
||||
@ -22,7 +27,10 @@
|
||||
},
|
||||
"inputStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to input."
|
||||
"description": "Css style to applied to input.",
|
||||
"docs": {
|
||||
"displayType": "style"
|
||||
}
|
||||
},
|
||||
"options": {
|
||||
"type": "array",
|
||||
@ -69,6 +77,9 @@
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"docs": {
|
||||
"displayType": "optionsSelector"
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
@ -121,6 +132,9 @@
|
||||
"type": "object",
|
||||
"description": "Css style to applied to label feedback."
|
||||
}
|
||||
},
|
||||
"docs": {
|
||||
"displayType": "label"
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
|
@ -1,7 +1,9 @@
|
||||
{
|
||||
"valueType": "array",
|
||||
"category": "input",
|
||||
"loading": false,
|
||||
"loading": {
|
||||
"type": "SkeletonInput"
|
||||
},
|
||||
"test": {
|
||||
"validation": true,
|
||||
"required": true
|
||||
@ -24,7 +26,10 @@
|
||||
"clearIcon": {
|
||||
"type": ["string", "object"],
|
||||
"default": "CloseCircleOutlined",
|
||||
"description": "Name of an Ant Design Icon or properties of an Icon block to customize icon at far right position of the selector, shown when user is given option to clear input."
|
||||
"description": "Name of an Ant Design Icon or properties of an Icon block to customize icon at far right position of the selector, shown when user is given option to clear input.",
|
||||
"docs": {
|
||||
"displayType": "icon"
|
||||
}
|
||||
},
|
||||
"disabled": {
|
||||
"type": "boolean",
|
||||
@ -33,11 +38,17 @@
|
||||
},
|
||||
"inputStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to input."
|
||||
"description": "Css style to applied to input.",
|
||||
"docs": {
|
||||
"displayType": "style"
|
||||
}
|
||||
},
|
||||
"optionsStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to option elements."
|
||||
"description": "Css style to applied to option elements.",
|
||||
"docs": {
|
||||
"displayType": "style"
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"type": "object",
|
||||
@ -89,6 +100,9 @@
|
||||
"type": "object",
|
||||
"description": "Css style to applied to label feedback."
|
||||
}
|
||||
},
|
||||
"docs": {
|
||||
"displayType": "label"
|
||||
}
|
||||
},
|
||||
"options": {
|
||||
@ -136,6 +150,9 @@
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"docs": {
|
||||
"displayType": "optionsSelector"
|
||||
}
|
||||
},
|
||||
"placeholder": {
|
||||
@ -146,7 +163,10 @@
|
||||
"selectedIcon": {
|
||||
"type": ["string", "object"],
|
||||
"default": "CheckOutlined",
|
||||
"description": "Name of an Ant Design Icon or properties of an Icon block to customize icon showing when a selection is made in the drop-down list."
|
||||
"description": "Name of an Ant Design Icon or properties of an Icon block to customize icon showing when a selection is made in the drop-down list.",
|
||||
"docs": {
|
||||
"displayType": "icon"
|
||||
}
|
||||
},
|
||||
"showArrow": {
|
||||
"type": "boolean",
|
||||
@ -162,7 +182,10 @@
|
||||
"suffixIcon": {
|
||||
"type": ["string", "object"],
|
||||
"default": "DownOutlined",
|
||||
"description": "Name of an Ant Design Icon or properties of an Icon block to customize at the drop-down position of the selector."
|
||||
"description": "Name of an Ant Design Icon or properties of an Icon block to customize at the drop-down position of the selector.",
|
||||
"docs": {
|
||||
"displayType": "icon"
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
|
@ -1,7 +1,9 @@
|
||||
{
|
||||
"valueType": "any",
|
||||
"category": "input",
|
||||
"loading": false,
|
||||
"loading": {
|
||||
"type": "SkeletonInput"
|
||||
},
|
||||
"test": {
|
||||
"validation": true,
|
||||
"required": true
|
||||
@ -13,7 +15,10 @@
|
||||
"properties": {
|
||||
"color": {
|
||||
"type": "string",
|
||||
"description": "Selected radio color."
|
||||
"description": "Selected radio color.",
|
||||
"docs": {
|
||||
"displayType": "color"
|
||||
}
|
||||
},
|
||||
"disabled": {
|
||||
"type": "boolean",
|
||||
@ -22,7 +27,10 @@
|
||||
},
|
||||
"inputStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to input."
|
||||
"description": "Css style to applied to input.",
|
||||
"docs": {
|
||||
"displayType": "style"
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"type": "object",
|
||||
@ -74,6 +82,9 @@
|
||||
"type": "object",
|
||||
"description": "Css style to applied to label feedback."
|
||||
}
|
||||
},
|
||||
"docs": {
|
||||
"displayType": "label"
|
||||
}
|
||||
},
|
||||
"options": {
|
||||
@ -121,6 +132,9 @@
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"docs": {
|
||||
"displayType": "optionsSelector"
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
|
@ -1,7 +1,9 @@
|
||||
{
|
||||
"valueType": "any",
|
||||
"category": "input",
|
||||
"loading": false,
|
||||
"loading": {
|
||||
"type": "SkeletonInput"
|
||||
},
|
||||
"test": {
|
||||
"validation": true,
|
||||
"required": true
|
||||
@ -24,15 +26,24 @@
|
||||
"clearIcon": {
|
||||
"type": ["string", "object"],
|
||||
"default": "CloseCircleOutlined",
|
||||
"description": "Name of an Ant Design Icon or properties of an Icon block to customize icon at far right position of the selector, shown when user is given option to clear input."
|
||||
"description": "Name of an Ant Design Icon or properties of an Icon block to customize icon at far right position of the selector, shown when user is given option to clear input.",
|
||||
"docs": {
|
||||
"displayType": "icon"
|
||||
}
|
||||
},
|
||||
"inputStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to input."
|
||||
"description": "Css style to applied to input.",
|
||||
"docs": {
|
||||
"displayType": "style"
|
||||
}
|
||||
},
|
||||
"optionsStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to option elements."
|
||||
"description": "Css style to applied to option elements.",
|
||||
"docs": {
|
||||
"displayType": "style"
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"type": "object",
|
||||
@ -84,9 +95,11 @@
|
||||
"type": "object",
|
||||
"description": "Css style to applied to label feedback."
|
||||
}
|
||||
},
|
||||
"docs": {
|
||||
"displayType": "label"
|
||||
}
|
||||
},
|
||||
|
||||
"disabled": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
@ -137,6 +150,9 @@
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"docs": {
|
||||
"displayType": "optionsSelector"
|
||||
}
|
||||
},
|
||||
"placeholder": {
|
||||
@ -163,7 +179,10 @@
|
||||
"suffixIcon": {
|
||||
"type": ["string", "object"],
|
||||
"default": "DownOutlined",
|
||||
"description": "Name of an Ant Design Icon or properties of an Icon block to customize icon at the drop-down position of the selector."
|
||||
"description": "Name of an Ant Design Icon or properties of an Icon block to customize icon at the drop-down position of the selector.",
|
||||
"docs": {
|
||||
"displayType": "icon"
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
|
@ -1,7 +1,9 @@
|
||||
{
|
||||
"valueType": "string",
|
||||
"category": "input",
|
||||
"loading": false,
|
||||
"loading": {
|
||||
"type": "SkeletonInput"
|
||||
},
|
||||
"test": {
|
||||
"validation": true,
|
||||
"required": true
|
||||
|
@ -1,7 +1,9 @@
|
||||
{
|
||||
"valueType": "string",
|
||||
"category": "input",
|
||||
"loading": false,
|
||||
"loading": {
|
||||
"type": "SkeletonInput"
|
||||
},
|
||||
"test": {
|
||||
"validation": true,
|
||||
"required": true
|
||||
|
@ -16,8 +16,12 @@ _ref:
|
||||
path: templates/blocks/template.yaml.njk
|
||||
vars:
|
||||
block_type: AutoComplete
|
||||
value_type: String
|
||||
value_type: string
|
||||
category: input
|
||||
init_property_values:
|
||||
options:
|
||||
- one
|
||||
- two
|
||||
description_content: |
|
||||
The AutoComplete block is a text input that has a list of suggestions for the user. These suggestions are filtered as the user fills in the input. The user is also allowed to fill in an input not part of that list.
|
||||
|
||||
|
57
packages/docs/blocks/input/ButtonSelector.yaml
Normal file
57
packages/docs/blocks/input/ButtonSelector.yaml
Normal file
@ -0,0 +1,57 @@
|
||||
# Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
# Licensed under the Apache License, Version 2.0 (the "License");
|
||||
# you may not use this file except in compliance with the License.
|
||||
# You may obtain a copy of the License at
|
||||
|
||||
# http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
# Unless required by applicable law or agreed to in writing, software
|
||||
# distributed under the License is distributed on an "AS IS" BASIS,
|
||||
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
# See the License for the specific language governing permissions and
|
||||
# limitations under the License.
|
||||
|
||||
_ref:
|
||||
path: templates/blocks/template.yaml.njk
|
||||
vars:
|
||||
block_type: ButtonSelector
|
||||
value_type: any
|
||||
category: input
|
||||
init_state_values:
|
||||
__optionsType: Label-value pairs
|
||||
init_property_values:
|
||||
options:
|
||||
- label: First
|
||||
value: one
|
||||
primitive: one
|
||||
- label: Second
|
||||
value: two
|
||||
primitive: two
|
||||
|
||||
description_content: |
|
||||
The `ButtonSelector` block allows a user to select a single value from a set of options. The user cannot deselect an option once they have selected an input.
|
||||
|
||||
The options for the selector can be provides as either an array of primitive values (strings, numbers, booleans or dates), or as an array of label-value pairs, where the label is a string, and the value can be of any type, including objects like dates and arrays.
|
||||
|
||||
> Other selector blocks are `CheckboxSelector`, `MultipleSelector`, `RadioSelector` and `Selector`.
|
||||
default_properties:
|
||||
_ref:
|
||||
path: ../blocks/blocksAntd/src/blocks/ButtonSelector/ButtonSelector.json
|
||||
transformer: templates/blocks/defaultValueTransformer.js
|
||||
properties_getter:
|
||||
_ref:
|
||||
path: ../blocks/blocksAntd/src/blocks/ButtonSelector/ButtonSelector.json
|
||||
transformer: templates/blocks/propertiesGetterTransformer.js
|
||||
properties_form:
|
||||
_ref:
|
||||
path: ../blocks/blocksAntd/src/blocks/ButtonSelector/ButtonSelector.json
|
||||
transformer: templates/blocks/propertiesFormTransformer.js
|
||||
|
||||
available_actions_description: |
|
||||
###### onChange
|
||||
Triggered when value is changed.
|
||||
|
||||
examples:
|
||||
- title: ButtonSelector input
|
||||
properties: '{"title": "ButtonSelector input", "options": ["Option 1", "Option 2"]}'
|
58
packages/docs/blocks/input/CheckboxSelector.yaml
Normal file
58
packages/docs/blocks/input/CheckboxSelector.yaml
Normal file
@ -0,0 +1,58 @@
|
||||
# Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
# Licensed under the Apache License, Version 2.0 (the "License");
|
||||
# you may not use this file except in compliance with the License.
|
||||
# You may obtain a copy of the License at
|
||||
|
||||
# http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
# Unless required by applicable law or agreed to in writing, software
|
||||
# distributed under the License is distributed on an "AS IS" BASIS,
|
||||
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
# See the License for the specific language governing permissions and
|
||||
# limitations under the License.
|
||||
|
||||
_ref:
|
||||
path: templates/blocks/template.yaml.njk
|
||||
vars:
|
||||
block_type: CheckboxSelector
|
||||
value_type: any[]
|
||||
category: input
|
||||
init_state_values:
|
||||
__optionsType: Label-value pairs
|
||||
init_property_values:
|
||||
options:
|
||||
- label: First
|
||||
value: one
|
||||
primitive: one
|
||||
- label: Second
|
||||
value: two
|
||||
primitive: two
|
||||
|
||||
description_content: |
|
||||
The `CheckboxSelector` block allows a user to select multiple values from a set of options.
|
||||
|
||||
The options for the selector can be provides as either an array of primitive values (strings, numbers, booleans, or dates), or as an array of label-value pairs, where the label is a string, and the value can be of any type, including objects like dates and arrays.
|
||||
|
||||
> Other selector blocks are `ButtonSelector`, `MultipleSelector`, `RadioSelector` and `Selector`.
|
||||
|
||||
default_properties:
|
||||
_ref:
|
||||
path: ../blocks/blocksAntd/src/blocks/CheckboxSelector/CheckboxSelector.json
|
||||
transformer: templates/blocks/defaultValueTransformer.js
|
||||
properties_getter:
|
||||
_ref:
|
||||
path: ../blocks/blocksAntd/src/blocks/CheckboxSelector/CheckboxSelector.json
|
||||
transformer: templates/blocks/propertiesGetterTransformer.js
|
||||
properties_form:
|
||||
_ref:
|
||||
path: ../blocks/blocksAntd/src/blocks/CheckboxSelector/CheckboxSelector.json
|
||||
transformer: templates/blocks/propertiesFormTransformer.js
|
||||
|
||||
available_actions_description: |
|
||||
###### onChange
|
||||
Triggered when value is changed.
|
||||
|
||||
examples:
|
||||
- title: CheckboxSelector input
|
||||
properties: '{"title": "CheckboxSelector input", "options": ["Option 1", "Option 2"]}'
|
58
packages/docs/blocks/input/MultipleSelector.yaml
Normal file
58
packages/docs/blocks/input/MultipleSelector.yaml
Normal file
@ -0,0 +1,58 @@
|
||||
# Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
# Licensed under the Apache License, Version 2.0 (the "License");
|
||||
# you may not use this file except in compliance with the License.
|
||||
# You may obtain a copy of the License at
|
||||
|
||||
# http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
# Unless required by applicable law or agreed to in writing, software
|
||||
# distributed under the License is distributed on an "AS IS" BASIS,
|
||||
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
# See the License for the specific language governing permissions and
|
||||
# limitations under the License.
|
||||
|
||||
_ref:
|
||||
path: templates/blocks/template.yaml.njk
|
||||
vars:
|
||||
block_type: MultipleSelector
|
||||
value_type: any[]
|
||||
category: input
|
||||
init_state_values:
|
||||
__optionsType: Label-value pairs
|
||||
init_property_values:
|
||||
options:
|
||||
- label: First
|
||||
value: one
|
||||
primitive: one
|
||||
- label: Second
|
||||
value: two
|
||||
primitive: two
|
||||
|
||||
description_content: |
|
||||
The `MultipleSelector` block is a drop down selector that allows a user to select multiple values from a set of options.
|
||||
|
||||
The options for the selector can be provides as either an array of primitive values (Strings, numbers, booleans or dates), or as an array of label-value pairs, where the label is a string, and the value can be of any type, including objects like dates and arrays.
|
||||
|
||||
> Other selector blocks are `ButtonSelector`, `CheckboxSelector`, `RadioSelector` and `Selector`.
|
||||
|
||||
default_properties:
|
||||
_ref:
|
||||
path: ../blocks/blocksAntd/src/blocks/MultipleSelector/MultipleSelector.json
|
||||
transformer: templates/blocks/defaultValueTransformer.js
|
||||
properties_getter:
|
||||
_ref:
|
||||
path: ../blocks/blocksAntd/src/blocks/MultipleSelector/MultipleSelector.json
|
||||
transformer: templates/blocks/propertiesGetterTransformer.js
|
||||
properties_form:
|
||||
_ref:
|
||||
path: ../blocks/blocksAntd/src/blocks/MultipleSelector/MultipleSelector.json
|
||||
transformer: templates/blocks/propertiesFormTransformer.js
|
||||
|
||||
available_actions_description: |
|
||||
###### onChange
|
||||
Triggered when value is changed.
|
||||
|
||||
examples:
|
||||
- title: MultipleSelector input
|
||||
properties: '{"title": "MultipleSelector input", "options": ["Option 1", "Option 2"]}'
|
58
packages/docs/blocks/input/RadioSelector.yaml
Normal file
58
packages/docs/blocks/input/RadioSelector.yaml
Normal file
@ -0,0 +1,58 @@
|
||||
# Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
# Licensed under the Apache License, Version 2.0 (the "License");
|
||||
# you may not use this file except in compliance with the License.
|
||||
# You may obtain a copy of the License at
|
||||
|
||||
# http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
# Unless required by applicable law or agreed to in writing, software
|
||||
# distributed under the License is distributed on an "AS IS" BASIS,
|
||||
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
# See the License for the specific language governing permissions and
|
||||
# limitations under the License.
|
||||
|
||||
_ref:
|
||||
path: templates/blocks/template.yaml.njk
|
||||
vars:
|
||||
block_type: RadioSelector
|
||||
value_type: any
|
||||
category: input
|
||||
init_state_values:
|
||||
__optionsType: Label-value pairs
|
||||
init_property_values:
|
||||
options:
|
||||
- label: First
|
||||
value: one
|
||||
primitive: one
|
||||
- label: Second
|
||||
value: two
|
||||
primitive: two
|
||||
|
||||
description_content: |
|
||||
The `RadioSelector` block is a set of radio buttons that allow a user to select a single value from a set of options.
|
||||
|
||||
The options for the selector can be provides as either an array of primitive values (Strings, numbers, booleans or dates), or as an array of label-value pairs, where the label is a string, and the value can be of any type, including objects like dates and arrays.
|
||||
|
||||
> Other selector blocks are `ButtonSelector`, `CheckboxSelector`, `MultipleSelector` and `Selector`.
|
||||
|
||||
default_properties:
|
||||
_ref:
|
||||
path: ../blocks/blocksAntd/src/blocks/RadioSelector/RadioSelector.json
|
||||
transformer: templates/blocks/defaultValueTransformer.js
|
||||
properties_getter:
|
||||
_ref:
|
||||
path: ../blocks/blocksAntd/src/blocks/RadioSelector/RadioSelector.json
|
||||
transformer: templates/blocks/propertiesGetterTransformer.js
|
||||
properties_form:
|
||||
_ref:
|
||||
path: ../blocks/blocksAntd/src/blocks/RadioSelector/RadioSelector.json
|
||||
transformer: templates/blocks/propertiesFormTransformer.js
|
||||
|
||||
available_actions_description: |
|
||||
###### onChange
|
||||
Triggered when value is changed.
|
||||
|
||||
examples:
|
||||
- title: RadioSelector input
|
||||
properties: '{"title": "RadioSelector input", "options": ["Option 1", "Option 2"]}'
|
58
packages/docs/blocks/input/Selector.yaml
Normal file
58
packages/docs/blocks/input/Selector.yaml
Normal file
@ -0,0 +1,58 @@
|
||||
# Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
# Licensed under the Apache License, Version 2.0 (the "License");
|
||||
# you may not use this file except in compliance with the License.
|
||||
# You may obtain a copy of the License at
|
||||
|
||||
# http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
# Unless required by applicable law or agreed to in writing, software
|
||||
# distributed under the License is distributed on an "AS IS" BASIS,
|
||||
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
# See the License for the specific language governing permissions and
|
||||
# limitations under the License.
|
||||
|
||||
_ref:
|
||||
path: templates/blocks/template.yaml.njk
|
||||
vars:
|
||||
block_type: Selector
|
||||
value_type: any
|
||||
category: input
|
||||
init_state_values:
|
||||
__optionsType: Label-value pairs
|
||||
init_property_values:
|
||||
options:
|
||||
- label: First
|
||||
value: one
|
||||
primitive: one
|
||||
- label: Second
|
||||
value: two
|
||||
primitive: two
|
||||
|
||||
description_content: |
|
||||
The `Selector` block is a drop down selector that allows a user to select a single value from a set of options.
|
||||
|
||||
The options for the selector can be provides as either an array of primitive values (Strings, numbers, booleans or dates), or as an array of label-value pairs, where the label is a string, and the value can be of any type, including objects like dates and arrays.
|
||||
|
||||
> Other selector blocks are `ButtonSelector`, `CheckboxSelector`, `MultipleSelector` and `RadioSelector`.
|
||||
|
||||
default_properties:
|
||||
_ref:
|
||||
path: ../blocks/blocksAntd/src/blocks/Selector/Selector.json
|
||||
transformer: templates/blocks/defaultValueTransformer.js
|
||||
properties_getter:
|
||||
_ref:
|
||||
path: ../blocks/blocksAntd/src/blocks/Selector/Selector.json
|
||||
transformer: templates/blocks/propertiesGetterTransformer.js
|
||||
properties_form:
|
||||
_ref:
|
||||
path: ../blocks/blocksAntd/src/blocks/Selector/Selector.json
|
||||
transformer: templates/blocks/propertiesFormTransformer.js
|
||||
|
||||
available_actions_description: |
|
||||
###### onChange
|
||||
Triggered when value is changed.
|
||||
|
||||
examples:
|
||||
- title: Selector input
|
||||
properties: '{"title": "Selector input", "options": ["Option 1", "Option 2"]}'
|
@ -16,7 +16,7 @@ _ref:
|
||||
path: templates/blocks/template.yaml.njk
|
||||
vars:
|
||||
block_type: TextInput
|
||||
value_type: String
|
||||
value_type: string
|
||||
category: input
|
||||
description_content: |
|
||||
The `TextInput` block is a single line text input.
|
||||
|
@ -139,6 +139,21 @@ menus:
|
||||
- id: AutoComplete
|
||||
type: MenuLink
|
||||
pageId: AutoComplete
|
||||
- id: ButtonSelector
|
||||
type: MenuLink
|
||||
pageId: ButtonSelector
|
||||
- id: CheckboxSelector
|
||||
type: MenuLink
|
||||
pageId: CheckboxSelector
|
||||
- id: MultipleSelector
|
||||
type: MenuLink
|
||||
pageId: MultipleSelector
|
||||
- id: RadioSelector
|
||||
type: MenuLink
|
||||
pageId: RadioSelector
|
||||
- id: Selector
|
||||
type: MenuLink
|
||||
pageId: Selector
|
||||
- id: TextInput
|
||||
type: MenuLink
|
||||
pageId: TextInput
|
||||
@ -316,6 +331,11 @@ pages:
|
||||
- _ref: concepts/operators.yaml
|
||||
|
||||
- _ref: blocks/input/AutoComplete.yaml
|
||||
- _ref: blocks/input/ButtonSelector.yaml
|
||||
- _ref: blocks/input/CheckboxSelector.yaml
|
||||
- _ref: blocks/input/MultipleSelector.yaml
|
||||
- _ref: blocks/input/RadioSelector.yaml
|
||||
- _ref: blocks/input/Selector.yaml
|
||||
- _ref: blocks/input/TextInput.yaml
|
||||
|
||||
- _ref: blocks/display/Button.yaml
|
||||
|
@ -18,13 +18,17 @@ function transformer(obj) {
|
||||
const blockProperties = obj.schema.properties.properties;
|
||||
const defaultValues = {};
|
||||
Object.keys(blockProperties).forEach((key) => {
|
||||
if (blockProperties[key].default) {
|
||||
if (blockProperties[key].default || blockProperties[key].default === false) {
|
||||
defaultValues[key] = blockProperties[key].default;
|
||||
}
|
||||
if (key === 'label') {
|
||||
defaultValues.label = {
|
||||
span: null,
|
||||
align: 'left',
|
||||
inline: false,
|
||||
disabled: false,
|
||||
colon: true,
|
||||
extra: null,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
@ -13,27 +13,21 @@
|
||||
# limitations under the License.
|
||||
|
||||
_get:
|
||||
key: 0.block
|
||||
key: 0.value
|
||||
from:
|
||||
_mql.aggregate:
|
||||
on:
|
||||
- block:
|
||||
- value:
|
||||
_var:
|
||||
name: block
|
||||
name: value
|
||||
default: {}
|
||||
pipeline:
|
||||
- $project:
|
||||
block.id: $block.id
|
||||
block.type: $block.type
|
||||
block.style: $block.style
|
||||
block.visible: $block.visible
|
||||
block.required: $block.required
|
||||
block.areas: $block.areas
|
||||
block.layout:
|
||||
value:
|
||||
$arrayToObject:
|
||||
$filter:
|
||||
input:
|
||||
$objectToArray: $block.layout
|
||||
$objectToArray: $value
|
||||
as: x
|
||||
cond:
|
||||
$and:
|
||||
@ -48,34 +42,14 @@ _get:
|
||||
v: $$x.v
|
||||
- $objectToArray:
|
||||
_var:
|
||||
name: block.default_layout
|
||||
name: default_value
|
||||
default: {}
|
||||
block.properties:
|
||||
$arrayToObject:
|
||||
$filter:
|
||||
input:
|
||||
$objectToArray: $block.properties
|
||||
as: x
|
||||
cond:
|
||||
$and:
|
||||
- $not:
|
||||
$eq:
|
||||
- $$x.v
|
||||
- null
|
||||
- $not:
|
||||
$in:
|
||||
- k: $$x.k
|
||||
v: $$x.v
|
||||
- $objectToArray:
|
||||
_var:
|
||||
name: block.default_properties
|
||||
default: {}
|
||||
- $project:
|
||||
block:
|
||||
value:
|
||||
$arrayToObject:
|
||||
$filter:
|
||||
input:
|
||||
$objectToArray: $block
|
||||
$objectToArray: $value
|
||||
as: x
|
||||
cond:
|
||||
$and:
|
||||
@ -88,13 +62,5 @@ _get:
|
||||
- $in:
|
||||
- k: $$x.k
|
||||
v: $$x.v
|
||||
- - k: properties
|
||||
- - k: label
|
||||
v: {}
|
||||
- k: layout
|
||||
v: {}
|
||||
- k: style
|
||||
v: {}
|
||||
- k: visible
|
||||
v: true
|
||||
- k: required
|
||||
v: false
|
10
packages/docs/templates/blocks/layout.yaml
vendored
10
packages/docs/templates/blocks/layout.yaml
vendored
@ -23,6 +23,7 @@
|
||||
- top
|
||||
label:
|
||||
span: 8
|
||||
align: right
|
||||
extra: Align content in the block vertically.
|
||||
- id: block.layout.span
|
||||
type: NumberInput
|
||||
@ -31,6 +32,7 @@
|
||||
size: small
|
||||
label:
|
||||
span: 8
|
||||
align: right
|
||||
extra: The number of grid cells that block will occupy in the raster.
|
||||
- id: block.layout.flex
|
||||
type: TextInput
|
||||
@ -39,6 +41,7 @@
|
||||
size: small
|
||||
label:
|
||||
span: 8
|
||||
align: right
|
||||
extra: Css flex style for the block.
|
||||
- id: block.layout.grow
|
||||
type: TextInput
|
||||
@ -47,6 +50,7 @@
|
||||
size: small
|
||||
label:
|
||||
span: 8
|
||||
align: right
|
||||
extra: Css flex grow setting for the block.
|
||||
- id: block.layout.shrink
|
||||
type: TextInput
|
||||
@ -55,6 +59,7 @@
|
||||
size: small
|
||||
label:
|
||||
span: 8
|
||||
align: right
|
||||
extra: Css flex basis setting for the block.
|
||||
- id: block.layout.size
|
||||
type: TextInput
|
||||
@ -63,6 +68,7 @@
|
||||
size: small
|
||||
label:
|
||||
span: 8
|
||||
align: right
|
||||
extra: Css flex shrink setting for the block.
|
||||
- id: block.layout.order
|
||||
type: TextInput
|
||||
@ -71,6 +77,7 @@
|
||||
size: small
|
||||
label:
|
||||
span: 8
|
||||
align: right
|
||||
extra: Css order to change where render order or elements in the raster.
|
||||
- id: block.layout.offset
|
||||
type: NumberInput
|
||||
@ -79,6 +86,7 @@
|
||||
size: small
|
||||
label:
|
||||
span: 8
|
||||
align: right
|
||||
extra: Number of grid cells to shift the block to the right.
|
||||
- id: block.layout.pull
|
||||
type: NumberInput
|
||||
@ -87,6 +95,7 @@
|
||||
size: small
|
||||
label:
|
||||
span: 8
|
||||
align: right
|
||||
extra: The number of grid cells that raster is moved to the left.
|
||||
- id: block.layout.push
|
||||
type: NumberInput
|
||||
@ -95,6 +104,7 @@
|
||||
size: small
|
||||
label:
|
||||
span: 8
|
||||
align: right
|
||||
extra: The number of grid cells that raster is moved to the right.
|
||||
- id: layout_block_input
|
||||
type: Markdown
|
||||
|
@ -174,7 +174,7 @@ function makeBlockDefinition(propertyName, propertyDescription) {
|
||||
block.type = 'ControlledList';
|
||||
block.blocks = [
|
||||
{
|
||||
id: 'block.properties.options.$',
|
||||
id: `block.properties.${propertyName}.$`,
|
||||
type: 'TextInput',
|
||||
properties: {
|
||||
size: 'small',
|
||||
@ -185,6 +185,90 @@ function makeBlockDefinition(propertyName, propertyDescription) {
|
||||
},
|
||||
];
|
||||
return block;
|
||||
case 'optionsSelector':
|
||||
block.type = 'Box';
|
||||
block.blocks = [
|
||||
{
|
||||
id: '__optionsType',
|
||||
type: 'ButtonSelector',
|
||||
properties: {
|
||||
title: 'Options type',
|
||||
options: ['Primitive', 'Label-value pairs'],
|
||||
size: 'small',
|
||||
label: { span: 8, align: 'right' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: `block.properties.options`,
|
||||
type: 'ControlledList',
|
||||
properties: {
|
||||
title: 'options:',
|
||||
size: 'small',
|
||||
},
|
||||
blocks: [
|
||||
{
|
||||
id: `block.properties.options.$.primitive`,
|
||||
type: 'TextInput',
|
||||
visible: {
|
||||
_if: {
|
||||
test: { _eq: [{ _state: '__optionsType' }, 'Primitive'] },
|
||||
then: true,
|
||||
else: false,
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
size: 'small',
|
||||
label: {
|
||||
disabled: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
id: `block.properties.options.$.label`,
|
||||
type: 'TextInput',
|
||||
visible: {
|
||||
_if: {
|
||||
test: {
|
||||
_eq: [{ _state: '__optionsType' }, 'Label-value pairs'],
|
||||
},
|
||||
then: true,
|
||||
else: false,
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
size: 'small',
|
||||
title: 'label',
|
||||
label: {
|
||||
span: 8,
|
||||
align: 'right',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
id: `block.properties.options.$.value`,
|
||||
type: 'TextInput',
|
||||
visible: {
|
||||
_if: {
|
||||
test: {
|
||||
_eq: [{ _state: '__optionsType' }, 'Label-value pairs'],
|
||||
},
|
||||
then: true,
|
||||
else: false,
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
size: 'small',
|
||||
title: 'value',
|
||||
label: {
|
||||
span: 8,
|
||||
align: 'right',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
return block;
|
||||
}
|
||||
}
|
||||
|
||||
@ -213,9 +297,11 @@ function makeBlockDefinition(propertyName, propertyDescription) {
|
||||
|
||||
function transformer(obj) {
|
||||
const blockProperties = obj.schema.properties.properties;
|
||||
const blocks = Object.keys(blockProperties).map((key) => {
|
||||
return makeBlockDefinition(key, blockProperties[key]);
|
||||
});
|
||||
const blocks = Object.keys(blockProperties)
|
||||
.sort()
|
||||
.map((key) => {
|
||||
return makeBlockDefinition(key, blockProperties[key]);
|
||||
});
|
||||
return blocks;
|
||||
}
|
||||
|
||||
|
@ -17,10 +17,14 @@
|
||||
function transformer(obj) {
|
||||
const blockProperties = obj.schema.properties.properties;
|
||||
const styleProperties = [];
|
||||
const optionsSelector = [];
|
||||
Object.keys(blockProperties).forEach((key) => {
|
||||
if (blockProperties[key].docs && blockProperties[key].docs.displayType === 'style') {
|
||||
styleProperties.push(key);
|
||||
}
|
||||
if (blockProperties[key].docs && blockProperties[key].docs.displayType === 'optionsSelector') {
|
||||
optionsSelector.push(key);
|
||||
}
|
||||
});
|
||||
const styleArray = styleProperties.map((name) => {
|
||||
const ret = {};
|
||||
@ -31,9 +35,32 @@ function transformer(obj) {
|
||||
};
|
||||
return ret;
|
||||
});
|
||||
const optionsArray = optionsSelector.map((name) => {
|
||||
const ret = {};
|
||||
ret[name] = {
|
||||
_if: {
|
||||
test: { _eq: [{ _state: '__optionsType' }, 'Primitive'] },
|
||||
then: {
|
||||
_get: {
|
||||
key: '0.options',
|
||||
from: {
|
||||
'_mql.aggregate': {
|
||||
pipeline: [{ $addFields: { options: '$options.primitive' } }],
|
||||
on: [{ _state: 'block.properties' }],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
else: {
|
||||
_state: 'block.properties.options',
|
||||
},
|
||||
},
|
||||
};
|
||||
return ret;
|
||||
});
|
||||
const assignArray = [{ _state: 'block.properties' }];
|
||||
return {
|
||||
'_object.assign': assignArray.concat(styleArray),
|
||||
'_object.assign': assignArray.concat(styleArray, optionsArray),
|
||||
};
|
||||
}
|
||||
|
||||
|
1
packages/docs/templates/blocks/style.yaml
vendored
1
packages/docs/templates/blocks/style.yaml
vendored
@ -22,4 +22,5 @@
|
||||
size: small
|
||||
label:
|
||||
span: 8
|
||||
align: right
|
||||
extra: CSS Object style properties. Should be in YAML format.
|
||||
|
81
packages/docs/templates/blocks/template.yaml.njk
vendored
81
packages/docs/templates/blocks/template.yaml.njk
vendored
@ -27,7 +27,7 @@ layout:
|
||||
contentGutter: 16
|
||||
actions:
|
||||
onInit:
|
||||
- id: init_state
|
||||
- id: init_default_properties
|
||||
type: SetState
|
||||
params:
|
||||
block:
|
||||
@ -37,6 +37,16 @@ actions:
|
||||
visible: true
|
||||
properties:
|
||||
_var: default_properties
|
||||
- id: init_property_values
|
||||
type: SetState
|
||||
params:
|
||||
block:
|
||||
properties:
|
||||
_var: init_property_values
|
||||
- id: init_state_values
|
||||
type: SetState
|
||||
params:
|
||||
_var: init_state_values
|
||||
blocks:
|
||||
- id: title
|
||||
type: Title
|
||||
@ -55,7 +65,9 @@ blocks:
|
||||
content:
|
||||
_nunjucks:
|
||||
template: |
|
||||
**Value Type**: {{ value_type }}
|
||||
```
|
||||
value type: {{ value_type }}
|
||||
```
|
||||
on:
|
||||
value_type:
|
||||
_var: value_type
|
||||
@ -135,30 +147,65 @@ blocks:
|
||||
on:
|
||||
value:
|
||||
_yaml.stringify:
|
||||
- _ref:
|
||||
path: templates/blocks/block_setup.yaml
|
||||
options:
|
||||
sortKeys: false
|
||||
on:
|
||||
_ref:
|
||||
path: templates/blocks/filter_default_value.yaml
|
||||
vars:
|
||||
block:
|
||||
value:
|
||||
id: block_id
|
||||
type: {{ block_type }}
|
||||
required:
|
||||
_state: block.required
|
||||
visible:
|
||||
_state: block.visible
|
||||
layout:
|
||||
_state: block.layout
|
||||
default_layout:
|
||||
align: top
|
||||
span: 24
|
||||
_ref:
|
||||
path: templates/blocks/filter_default_value.yaml
|
||||
vars:
|
||||
value:
|
||||
_state: block.layout
|
||||
default_value:
|
||||
align: top
|
||||
span: 24
|
||||
style:
|
||||
_yaml.parse:
|
||||
_if_none:
|
||||
- _state: style_block_input
|
||||
- ''
|
||||
visible:
|
||||
_state: block.visible
|
||||
required:
|
||||
_state: block.required
|
||||
properties:
|
||||
_var: properties_getter
|
||||
default_properties:
|
||||
_var: default_properties
|
||||
_log:
|
||||
_ref:
|
||||
path: templates/blocks/filter_default_value.yaml
|
||||
vars:
|
||||
value:
|
||||
_object.assign:
|
||||
- _var: properties_getter
|
||||
- label:
|
||||
_ref:
|
||||
path: templates/blocks/filter_default_value.yaml
|
||||
vars:
|
||||
value:
|
||||
_get:
|
||||
key: label
|
||||
from:
|
||||
_var: properties_getter
|
||||
default_value:
|
||||
span: null
|
||||
align: left
|
||||
inline: false
|
||||
disabled: false
|
||||
colon: true
|
||||
extra: null
|
||||
default_value:
|
||||
_var: default_properties
|
||||
default_value:
|
||||
required: false
|
||||
visible: true
|
||||
layout: {}
|
||||
properties: {}
|
||||
|
||||
|
||||
- id: right_column
|
||||
type: Box
|
||||
@ -216,6 +263,7 @@ blocks:
|
||||
title: required
|
||||
label:
|
||||
extra: Toggle if the field is indicated as compulsory and required when the Validate action is called.
|
||||
align: right
|
||||
span: 8
|
||||
size: small
|
||||
visible:
|
||||
@ -226,6 +274,7 @@ blocks:
|
||||
title: visible
|
||||
label:
|
||||
extra: Toggle if block is visible and has a value in state.
|
||||
align: right
|
||||
span: 8
|
||||
size: small
|
||||
- id: examples_divider
|
||||
|
Loading…
Reference in New Issue
Block a user