|
@@ -6,7 +6,7 @@
|
|
|
class="inline-block text-sm mr-4 p-2 rounded-lg"
|
|
|
>
|
|
|
<v-remixicon :path="icons.riAB" size="20" class="inline-block mr-1" />
|
|
|
- <span>Comparison</span>
|
|
|
+ <span>conditions</span>
|
|
|
</div>
|
|
|
<div class="flex-grow"></div>
|
|
|
<v-remixicon
|
|
@@ -15,7 +15,7 @@
|
|
|
@click="editor.removeNodeId(`node-${block.id}`)"
|
|
|
/>
|
|
|
<button
|
|
|
- :disabled="block.data.comparison && block.data.comparison.length > 4"
|
|
|
+ :disabled="block.data.conditions && block.data.conditions.length > 4"
|
|
|
class="bg-accent ml-2 rounded-lg text-white text-center"
|
|
|
style="height: 37px; width: 37px"
|
|
|
@click="addComparison"
|
|
@@ -24,11 +24,11 @@
|
|
|
</button>
|
|
|
</div>
|
|
|
<div
|
|
|
- v-if="block.data.comparison && block.data.comparison.length !== 0"
|
|
|
+ v-if="block.data.conditions && block.data.conditions.length !== 0"
|
|
|
class="mt-4 space-y-2"
|
|
|
>
|
|
|
<div
|
|
|
- v-for="(item, index) in block.data.comparison"
|
|
|
+ v-for="(item, index) in block.data.conditions"
|
|
|
:key="item.id"
|
|
|
class="flex items-center group justify-end"
|
|
|
>
|
|
@@ -39,8 +39,8 @@
|
|
|
/>
|
|
|
<div class="flex items-center transition bg-input rounded-lg">
|
|
|
<select
|
|
|
- v-model="block.data.comparison[index].type"
|
|
|
- :title="conditions[block.data.comparison[index]?.type] || 'Equals'"
|
|
|
+ v-model="block.data.conditions[index].type"
|
|
|
+ :title="conditions[block.data.conditions[index]?.type] || 'Equals'"
|
|
|
class="
|
|
|
bg-transparent
|
|
|
font-mono
|
|
@@ -62,7 +62,7 @@
|
|
|
</select>
|
|
|
<div class="bg-gray-300 w-px" style="height: 30px"></div>
|
|
|
<input
|
|
|
- v-model="block.data.comparison[index].value"
|
|
|
+ v-model="block.data.conditions[index].value"
|
|
|
type="text"
|
|
|
placeholder="value"
|
|
|
class="p-2 flex-1 transition rounded-r-lg bg-transparent w-36"
|
|
@@ -70,7 +70,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<p
|
|
|
- v-if="block.data.comparison && block.data.comparison.length !== 0"
|
|
|
+ v-if="block.data.conditions && block.data.conditions.length !== 0"
|
|
|
class="text-right text-gray-600"
|
|
|
>
|
|
|
<span title="Execute when all comparisons don't meet the requirement">
|
|
@@ -97,7 +97,7 @@ const props = defineProps({
|
|
|
},
|
|
|
});
|
|
|
|
|
|
-const componentId = useComponentId('block-comparison');
|
|
|
+const componentId = useComponentId('block-conditions');
|
|
|
const block = useEditorBlock(`#${componentId}`, props.editor);
|
|
|
|
|
|
const conditions = {
|
|
@@ -110,27 +110,27 @@ const conditions = {
|
|
|
};
|
|
|
|
|
|
function addComparison() {
|
|
|
- if (block.data.comparison.length >= 5) return;
|
|
|
+ if (block.data.conditions.length >= 5) return;
|
|
|
|
|
|
- block.data.comparison.push({ id: nanoid(6), type: '==', value: '' });
|
|
|
+ block.data.conditions.push({ id: nanoid(6), type: '==', value: '' });
|
|
|
|
|
|
- if (block.data.comparison.length === 1) props.editor.addNodeOutput(block.id);
|
|
|
+ if (block.data.conditions.length === 1) props.editor.addNodeOutput(block.id);
|
|
|
|
|
|
props.editor.addNodeOutput(block.id);
|
|
|
}
|
|
|
function deleteComparison(index) {
|
|
|
- block.data.comparison.splice(index, 1);
|
|
|
+ block.data.conditions.splice(index, 1);
|
|
|
|
|
|
props.editor.removeNodeOutput(block.id, `output_${index + 1}`);
|
|
|
- if (block.data.comparison.length === 0)
|
|
|
+ if (block.data.conditions.length === 0)
|
|
|
props.editor.removeNodeOutput(block.id, `output_1`);
|
|
|
}
|
|
|
|
|
|
watch(
|
|
|
- () => block.data.comparison,
|
|
|
+ () => block.data.conditions,
|
|
|
debounce((newValue) => {
|
|
|
props.editor.updateNodeDataFromId(block.id, {
|
|
|
- comparison: toRaw(newValue),
|
|
|
+ conditions: toRaw(newValue),
|
|
|
});
|
|
|
|
|
|
props.editor.updateConnectionNodes(`node-${block.id}`);
|
|
@@ -138,3 +138,15 @@ watch(
|
|
|
{ deep: true }
|
|
|
);
|
|
|
</script>
|
|
|
+<style>
|
|
|
+.drawflow .drawflow-node.conditions .outputs {
|
|
|
+ top: 82px !important;
|
|
|
+ transform: none !important;
|
|
|
+}
|
|
|
+.drawflow .drawflow-node.conditions .output {
|
|
|
+ margin-bottom: 30px;
|
|
|
+}
|
|
|
+.drawflow .drawflow-node.conditions .output:nth-last-child(2) {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+</style>
|