Keep menu open when submenu is clicked

.github/workflows/eslint.yml

@@ -420,5 +420,5 @@ jobs:
         run: pnpm i --frozen-lockfile
         working-directory: openc3-cosmos-init/plugins/packages/openc3-vue-common
       - name: Run ESLint
-        run: pnpm lint --max-warnings 352
+        run: pnpm lint --max-warnings 331
         working-directory: openc3-cosmos-init/plugins/packages/openc3-vue-common

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/TopBar.vue

@@ -28,128 +28,25 @@
       </v-col>
     </v-row>
     <v-row dense class="flex-nowrap">
-      <v-menu ref="topmenu" v-for="(menu, i) in menus" :key="i">
-        <template v-slot:activator="{ props }">
-          <v-btn
-            v-bind="props"
-            variant="outlined"
-            class="mx-1 menu-button"
-            :text="menu.label"
-            :data-test="formatDT(`${title} ${menu.label}`)"
-          >
-            <template v-slot:append>
-              <v-icon class="menu-button-icon"> mdi-menu-down </v-icon>
-            </template>
-          </v-btn>
-        </template>
-        <v-list>
-          <template v-for="(option, j) in menu.items">
-            <v-divider v-if="option.divider" :key="j + '-divider'" />
-            <div
-              v-else-if="option.subMenu && option.subMenu.length > 0"
-              :key="j + '-submenu'"
-            >
-              <v-menu open-on-hover location="right" :key="j">
-                <template v-slot:activator="{ props }">
-                  <v-list-item
-                    v-bind="props"
-                    :disabled="option.disabled"
-                    :key="j"
-                  >
-                    <template v-slot:prepend v-if="option.icon">
-                      <v-icon :disabled="option.disabled">
-                        {{ option.icon }}
-                      </v-icon>
-                    </template>
-                    <v-list-item-title
-                      v-if="!option.radio && !option.checkbox"
-                      :style="
-                        'cursor: pointer;' +
-                        (option.disabled ? 'opacity: 0.2' : '')
-                      "
-                      >{{ option.label }}
-                    </v-list-item-title>
-                    <template v-slot:append>
-                      <v-icon> mdi-chevron-right </v-icon>
-                    </template>
-                  </v-list-item>
-                </template>
-                <v-list>
-                  <v-list-item
-                    v-for="(submenu, k) in option.subMenu"
-                    :key="k"
-                    :prepend-icon="submenu.icon"
-                    @click="subMenuClick(submenu)"
-                  >
-                    <v-list-item-title>{{ submenu.label }}</v-list-item-title>
-                  </v-list-item>
-                </v-list>
-              </v-menu>
-            </div>
-            <v-radio-group
-              v-else-if="option.radioGroup"
-              :model-value="option.value"
-              @update:model-value="option.command"
-              :key="j + '-radio-group'"
-              hide-details
-              density="compact"
-              class="ma-0 pa-0"
-            >
-              <v-list-item
-                v-for="(choice, k) in option.choices"
-                :key="k + '-choice'"
-              >
-                <v-list-item-action class="list-action">
-                  <v-radio
-                    color="secondary"
-                    :label="choice.label"
-                    :value="choice.value"
-                    density="compact"
-                    hide-details
-                  />
-                </v-list-item-action>
-              </v-list-item>
-            </v-radio-group>
-            <v-list-item
-              v-else
-              @click="option.command(option)"
-              :disabled="option.disabled"
-              :data-test="formatDT(`${title} ${menu.label} ${option.label}`)"
-              :key="j + '-list'"
-            >
-              <template v-slot:prepend v-if="option.icon">
-                <v-icon
-                  :icon="option.icon"
-                  :disabled="option.disabled"
-                ></v-icon>
-              </template>
-              <v-list-item-action class="list-action" v-if="option.checkbox">
-                <v-checkbox
-                  v-model="option.checked"
-                  :label="option.label"
-                  color="secondary"
-                  density="compact"
-                  hide-details
-                />
-              </v-list-item-action>
-              <v-list-item-title
-                v-if="!option.radio && !option.checkbox"
-                :style="
-                  'cursor: pointer;' + (option.disabled ? 'opacity: 0.2' : '')
-                "
-              >
-                {{ option.label }}
-              </v-list-item-title>
-            </v-list-item>
-          </template>
-        </v-list>
-      </v-menu>
+      <TopBarMenu
+        v-for="(menu, i) in menus"
+        :key="i + '-top-menu'"
+        :ref="'topmenu'"
+        :menu="menu"
+        :title="title"
+        @submenu-click="subMenuClick"
+      />
     </v-row>
   </teleport>
 </template>
 
 <script>
+import TopBarMenu from './TopBarMenu.vue'
+
 export default {
+  components: {
+    TopBarMenu,
+  },
   props: {
     menus: {
       type: Array,
@@ -163,10 +60,6 @@ export default {
     },
   },
   methods: {
-    // Convert the string to a standard data-test format
-    formatDT: function (string) {
-      return string.replaceAll(' ', '-').toLowerCase()
-    },
     subMenuClick(submenu) {
       submenu.command(submenu)
       this.$refs.topmenu[0].isActive = false

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/TopBarMenu.vue

@@ -0,0 +1,146 @@
+<template>
+  <v-menu v-model="menuOpen" :close-on-content-click="false">
+    <template #activator="{ props }">
+      <v-btn
+        v-bind="props"
+        variant="outlined"
+        class="mx-1 menu-button"
+        :text="menu.label"
+        :data-test="formatDT(`${title} ${menu.label}`)"
+      >
+        <template #append>
+          <v-icon class="menu-button-icon"> mdi-menu-down </v-icon>
+        </template>
+      </v-btn>
+    </template>
+    <v-list>
+      <template v-for="(option, j) in menu.items">
+        <v-divider v-if="option.divider" :key="j + '-divider'" />
+        <div
+          v-else-if="option.subMenu && option.subMenu.length > 0"
+          :key="j + '-submenu'"
+        >
+          <v-menu :key="j" open-on-hover location="right">
+            <template #activator="{ props }">
+              <v-list-item v-bind="props" :key="j" :disabled="option.disabled">
+                <template v-if="option.icon" #prepend>
+                  <v-icon :disabled="option.disabled">
+                    {{ option.icon }}
+                  </v-icon>
+                </template>
+                <v-list-item-title
+                  v-if="!option.radio && !option.checkbox"
+                  :style="
+                    'cursor: pointer;' + (option.disabled ? 'opacity: 0.2' : '')
+                  "
+                >
+                  {{ option.label }}
+                </v-list-item-title>
+                <template #append>
+                  <v-icon> mdi-chevron-right </v-icon>
+                </template>
+              </v-list-item>
+            </template>
+            <v-list>
+              <v-list-item
+                v-for="(submenu, k) in option.subMenu"
+                :key="k"
+                :prepend-icon="submenu.icon"
+                @click="emits('submenu-click', submenu)"
+              >
+                <v-list-item-title>{{ submenu.label }}</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </div>
+        <v-radio-group
+          v-else-if="option.radioGroup"
+          :key="j + '-radio-group'"
+          class="ma-0 pa-0"
+          density="compact"
+          hide-details
+          :model-value="option.value"
+          @update:model-value="option.command"
+        >
+          <v-list-item
+            v-for="(choice, k) in option.choices"
+            :key="k + '-choice'"
+          >
+            <v-list-item-action class="list-action">
+              <v-radio
+                color="secondary"
+                :label="choice.label"
+                :value="choice.value"
+                density="compact"
+                hide-details
+              />
+            </v-list-item-action>
+          </v-list-item>
+        </v-radio-group>
+        <v-list-item
+          v-else
+          :key="j + '-list'"
+          :disabled="option.disabled"
+          :data-test="formatDT(`${title} ${menu.label} ${option.label}`)"
+          @click="
+            () => {
+              option.command(option)
+              if (!option.checkbox) closeMenu()
+            }
+          "
+        >
+          <template v-if="option.icon" #prepend>
+            <v-icon :icon="option.icon" :disabled="option.disabled"></v-icon>
+          </template>
+          <v-list-item-action v-if="option.checkbox" class="list-action">
+            <v-checkbox
+              v-model="option.checked"
+              :label="option.label"
+              color="secondary"
+              density="compact"
+              hide-details
+            />
+          </v-list-item-action>
+          <v-list-item-title
+            v-if="!option.radio && !option.checkbox"
+            :style="
+              'cursor: pointer;' + (option.disabled ? 'opacity: 0.2' : '')
+            "
+          >
+            {{ option.label }}
+          </v-list-item-title>
+        </v-list-item>
+      </template>
+    </v-list>
+  </v-menu>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  menu: { type: Object, required: true },
+  title: { type: String, required: true },
+})
+const emits = defineEmits(['submenu-click'])
+
+const menuOpen = ref(false)
+
+/**
+ * Close the menu programmatically.
+ *
+ * Allows setting close-on-content-click to false for the main menu to prevent closing when clicking a submenu, but
+ * still close when clicking other menu item types
+ */
+function closeMenu() {
+  menuOpen.value = false
+}
+
+/**
+ * Convert the string to a standard data-test format
+ * @param {string} string
+ */
+function formatDT(string) {
+  return string.replaceAll(' ', '-').toLowerCase()
+}
+</script>

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/tools/scriptrunner/ScriptRunner.vue

@@ -106,7 +106,7 @@
         </div>
       </div>
     </div>
-    <v-card>
+    <v-card class="flex-shrink-0">
       <v-card-text>
         <suite-runner
           v-if="suiteRunner"