Merge branch 'develop' into docs

This commit is contained in:
Gervwyk 2021-01-27 13:30:31 +02:00
commit 6fb9b42bbc
24 changed files with 650 additions and 97 deletions

View File

@ -1,7 +1,9 @@
{
"valueType": "string",
"category": "input",
"loading": false,
"loading": {
"type": "SkeletonInput"
},
"test": {
"validation": true,
"required": true

View File

@ -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",

View File

@ -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": {

View File

@ -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": {

View File

@ -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",

View File

@ -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": {

View File

@ -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",

View File

@ -1,7 +1,9 @@
{
"valueType": "string",
"category": "input",
"loading": false,
"loading": {
"type": "SkeletonInput"
},
"test": {
"validation": true,
"required": true

View File

@ -1,7 +1,9 @@
{
"valueType": "string",
"category": "input",
"loading": false,
"loading": {
"type": "SkeletonInput"
},
"test": {
"validation": true,
"required": true

View File

@ -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.

View 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"]}'

View 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"]}'

View 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"]}'

View 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"]}'

View 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"]}'

View File

@ -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.

View File

@ -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

View File

@ -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,
};
}
});

View File

@ -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

View File

@ -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

View File

@ -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;
}

View File

@ -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),
};
}

View File

@ -22,4 +22,5 @@
size: small
label:
span: 8
align: right
extra: CSS Object style properties. Should be in YAML format.

View File

@ -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