Convert Toggle to a controlled component

Author: Kobzol

site/frontend/src/pages/compare/header/data-selector.vue

@@ -37,11 +37,13 @@ function submitSettings() {
   const params = {start, end, stat};
   emit("change", params);
 }
+
+const opened = ref(false);
 </script>
 
 <template>
   <fieldset class="settings">
-    <Toggle>
+    <Toggle :opened="opened" @change="(value) => (opened = value)">
       <template #label>Do another comparison</template>
       <template #content>
         <div class="commits section">

site/frontend/src/pages/compare/header/filters.vue

@@ -29,11 +29,17 @@ watch(
   },
   {deep: true}
 );
+
+function updateOpened(opened: boolean) {
+  filterOpened.value = opened;
+}
+
+const filterOpened = ref(false);
 </script>
 
 <template>
   <fieldset class="collapsible-section">
-    <Toggle :defaultOpened="false">
+    <Toggle :opened="filterOpened" @change="updateOpened">
       <template #label>Filters</template>
       <template #content>
         <div>
@@ -46,9 +52,8 @@ watch(
               <div style="width: 160px">
                 <span>Profiles</span>
                 <Tooltip
-                  >The different compilation profiles (check, debug, opt,
-                  doc).</Tooltip
-                >
+                  >The different compilation profiles (check, debug, opt, doc).
+                </Tooltip>
               </div>
             </div>
             <ul class="states-list">
@@ -84,9 +89,8 @@ watch(
                   <span class="cache-label">opt</span>
                 </label>
                 <Tooltip
-                  >Release build that produces as optimized code as
-                  possible.</Tooltip
-                >
+                  >Release build that produces as optimized code as possible.
+                </Tooltip>
               </li>
               <li>
                 <label>
@@ -125,9 +129,8 @@ watch(
                   <span class="cache-label">full</span>
                 </label>
                 <Tooltip
-                  >A non-incremental full build starting with empty
-                  cache.</Tooltip
-                >
+                  >A non-incremental full build starting with empty cache.
+                </Tooltip>
               </li>
               <li>
                 <label>
@@ -139,8 +142,8 @@ watch(
                   <span class="cache-label">incr-full</span>
                 </label>
                 <Tooltip
-                  >An incremental build starting with empty cache.</Tooltip
-                >
+                  >An incremental build starting with empty cache.
+                </Tooltip>
               </li>
               <li>
                 <label>
@@ -181,8 +184,8 @@ watch(
                 <span>Categories</span>
                 <Tooltip
                   >Select benchmarks based on their category (primary or
-                  secondary).</Tooltip
-                >
+                  secondary).
+                </Tooltip>
               </div>
             </div>
             <ul class="states-list">

site/frontend/src/pages/compare/summary/aggregations.vue

@@ -2,6 +2,7 @@
 import {computeSummary, SummaryGroup, TestCase} from "../data";
 import Toggle from "../toggle.vue";
 import SummaryTable from "./summary-table.vue";
+import {ref} from "vue";
 
 const props = defineProps<{
   cases: TestCase[];
@@ -19,11 +20,13 @@ function calculateSummary(
   }
   return computeSummary(benchmarks);
 }
+
+const opened = ref(false);
 </script>
 
 <template>
   <fieldset class="collapsible-section">
-    <Toggle>
+    <Toggle :opened="opened" @change="(value) => (opened = value)">
       <template #label>Aggregations</template>
       <template #content>
         <div>

site/frontend/src/pages/compare/toggle.vue

@@ -1,24 +1,24 @@
 <script setup lang="ts">
-import {ref} from "vue";
-
 const props = withDefaults(
   defineProps<{
-    defaultOpened?: boolean;
+    opened?: boolean;
   }>(),
   {
-    defaultOpened: false,
+    opened: false,
   }
 );
 
-const opened = ref(props.defaultOpened);
+const emit = defineEmits<{
+  (e: "change", opened: boolean): void;
+}>();
 </script>
 
 <template>
-  <legend class="toggle section-heading" @click="opened = !opened">
+  <legend class="toggle section-heading" @click="emit('change', !props.opened)">
     <slot name="label"></slot>
-    <span>{{ opened ? " ▼" : " ▶" }}</span>
+    <span>{{ props.opened ? " ▼" : " ▶" }}</span>
   </legend>
-  <div v-show="opened">
+  <div v-show="props.opened">
     <slot name="content"></slot>
   </div>
 </template>