Improve conditional handling, add switch as conditional option

public/galaxy-charts.xml

@@ -22,14 +22,16 @@
             <name>setting_boolean</name>
             <type>boolean</type>
             <optional>true</optional>
+            <help>Setting: Boolean Help</help>
         </input>
         <input>
             <name>setting_conditional</name>
+            <label>Setting: Conditional</label>
             <type>conditional</type>
+            <help>Setting: Conditional Help</help>
             <test_param>
                 <name>test_condition</name>
-                <label>Setting: Condition</label>
-                <type>select</type>
+                <type>boolean</type>
                 <value>true</value>
                 <data>
                     <data>
@@ -49,7 +51,8 @@
                         <inputs>
                             <label>Case True: Input</label>
                             <name>case_true</name>
-                            <type>text</type>
+                            <type>textarea</type>
+                            <value>my value</value>
                         </inputs>
                     </inputs>
                 </cases>

src/Plugin.vue

@@ -28,21 +28,10 @@ watch(
 </script>
 
 <template>
-    <div ref="viewport" class="h-screen p-4">
-        <div class="text-lg py-4">Welcome to Galaxy Charts</div>
-        <div>Use the form on the right to specify settings, these are then parsed to your plugin component!</div>
-        <div>
-            e.g. `Setting:Text` is: <span class="font-bold">{{ props.settings.setting_text }}</span
-            >, and `Setting:Boolean` is: <span class="font-bold">{{ props.settings.setting_boolean }}</span
-            >.
-        </div>
-        <div class="py-4">
-            <span>You have also provided details for the following tracks:</span>
-            <div v-for="(track, index) of props.tracks">
-                <span class="mx-2">Track No. {{ index + 1 }}:</span>
-                <span class="font-bold">'{{ track.track_text }}' and </span>
-                <span class="font-bold">{{ track.track_color || "no color selected" }}.</span>
-            </div>
+    <div ref="viewport" class="h-screen p-4 overflow-auto">
+        <div class="bg-gray-600 text-white rounded-lg p-2">
+            <pre class="p-2">Settings: {{ settings }}</pre>
+            <pre class="p-2">Tracks: {{ tracks }}</pre>
         </div>
     </div>
 </template>

src/components/InputConditional.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { NSelect } from "naive-ui";
+import { NSelect, NSwitch } from "naive-ui";
 import InputForm from "@/components/InputForm.vue";
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { parseDefaults } from "@/utilities/parseDefaults";
 
 const props = defineProps({
@@ -15,8 +15,14 @@ const props = defineProps({
     },
 });
 
+// emit an event when adding or removing repeat blocks
+const emit = defineEmits(["update:value"]);
+
+// get test parameter
+const testParam = ref(props.input.test_param);
+
 // get test parameter name
-const testName = props.input.test_param.name;
+const testName = testParam.value.name;
 if (!testName) {
     console.error(`Test parameter has no name: ${props.input.name}.`);
 }
@@ -31,20 +37,47 @@ if (!currentValue.value || !(testName in currentValue.value)) {
 const currentTestValue = ref(currentValue.value[testName]);
 
 // collect input cases and identify defaults
-const inputCases = {};
-const inputDefaults = {};
-for (const inputCase of props.input.cases) {
-    inputCases[inputCase.value] = inputCase.inputs;
-    inputDefaults[inputCase.value] = parseDefaults(inputCase.inputs);
-    inputDefaults[inputCase.value][testName] = inputCase.value;
-}
+const caseDefaults = computed(() => {
+    const result = {};
+    for (const inputCase of props.input.cases) {
+        result[inputCase.value] = parseDefaults(inputCase.inputs);
+        result[inputCase.value][testName] = inputCase.value;
+    }
+    return result;
+});
+
+// collect all input cases
+const caseInputs = computed(() => {
+    const result = {};
+    for (const inputCase of props.input.cases) {
+        result[inputCase.value] = inputCase.inputs;
+    }
+    return result;
+});
+
+const currentInputs = computed(() => caseInputs.value[currentTestValue.value]);
+
+// handle conversion of boolean switch values to string for case evaluation
+const switchTestValue = computed({
+    get() {
+        return currentTestValue.value === "true";
+    },
+    set(newVal) {
+        currentTestValue.value = String(newVal);
+    },
+});
 
 // update values if test value changes or conditional input elements are modified
 function onUpdate(newValues) {
-    currentValue.value = { ...inputDefaults[currentTestValue.value] };
+    let updatedValues = { ...caseDefaults.value[currentTestValue.value] };
     if (newValues) {
-        currentValue.value = { ...currentValue.value, ...newValues };
+        const filteredValues = {};
+        currentInputs.value.forEach((x) => {
+            filteredValues[x.name] = newValues[x.name];
+        });
+        updatedValues = { ...updatedValues, ...newValues };
     }
+    emit("update:value", updatedValues);
 }
 
 // load defaults if test value changes
@@ -57,12 +90,9 @@ watch(
 </script>
 
 <template>
-    <n-select v-model:value="currentTestValue" :options="input.test_param.data" />
-    <div v-if="inputCases[currentTestValue]" class="border border-dotted border-green-600 rounded mt-2 p-2">
-        <InputForm
-            :dataset-id="datasetId"
-            :inputs="inputCases[currentTestValue]"
-            :values="currentValue"
-            @update:values="onUpdate" />
+    <n-switch v-if="testParam.type === 'boolean'" v-model:value="switchTestValue" />
+    <n-select v-else v-model:value="currentTestValue" :options="testParam.data" />
+    <div v-if="currentInputs" class="border border-dotted border-green-600 rounded mt-2 p-2">
+        <InputForm :dataset-id="datasetId" :inputs="currentInputs" :values="currentValue" @update:values="onUpdate" />
     </div>
 </template>

src/main.js

@@ -8,6 +8,10 @@ const config = {
     settings: {
         setting_text: "My Test Setting",
         setting_boolean: true,
+        setting_conditional: {
+            case_false: "something else",
+            test_condition: "false",
+        },
     },
 };