A condition builder is a component that allows users to build a condition using a set of rules.
Usage
Add expression
Add predicate
Add predicate
Add predicate
Add rule
<goat-condition-builder id="simple-condition-builder">
<goat-cb-predicate condition-operator="or">
<goat-cb-predicate vertical="true" condition-operator="and">
<goat-cb-compound-expression field-label="Age" condition-operator="or">
<goat-cb-expression id="age">
<goat-input inline="true" placeholder="Select Value"></goat-input>
</goat-cb-expression>
<goat-cb-expression id="age">
<goat-input inline="true" placeholder="Select Value"></goat-input>
</goat-cb-expression>
<goat-button size="sm" icon="add" slot="end">Add expression</goat-button>
</goat-cb-compound-expression>
<goat-cb-compound-expression field-label="State">
<goat-cb-expression id="age">
<goat-input inline="true" placeholder="Select Value"></goat-input>
</goat-cb-expression>
</goat-cb-compound-expression>
<goat-button slot="end" size="sm" icon="add">Add predicate</goat-button>
</goat-cb-predicate>
</goat-cb-predicate>
<goat-cb-predicate condition-operator="or">
<goat-cb-predicate vertical="true">
<goat-cb-compound-expression field-label="State">
<goat-cb-expression id="age">
<goat-input inline="true" placeholder="Select Value"></goat-input>
</goat-cb-expression>
</goat-cb-compound-expression>
<goat-button slot="end" size="sm" icon="add">Add predicate</goat-button>
</goat-cb-predicate>
</goat-cb-predicate>
<goat-cb-predicate>
<goat-cb-compound-expression field-label="City">
<goat-cb-expression id="age">
<goat-input inline="true" placeholder="Select Value"></goat-input>
</goat-cb-expression>
</goat-cb-compound-expression>
<goat-button slot="end" size="sm" icon="add">Add predicate</goat-button>
</goat-cb-predicate>
<goat-button size="sm" icon="add">Add rule</goat-button>
</goat-condition-builder>
<script>
const conditionBuilder = document.querySelector('goat-condition-builder');
conditionBuilder.addEventListener('condition-builder:change', (event) => {
console.log(event.detail);
});
document.querySelector('#age').operators = [{
label: 'Less than',
value: 'new',
icon: 'file-earmark',
},
{
label: 'More than',
value: 'save',
icon: 'person-circle',
}];
</script>