doveadm: CLI usage information should be displayed the same as HTTP API

Namely, hide under a clickable element, so user only sees the doveadm mode
they need after clicking.

Author: slusarz

components/DoveadmCliComponent.vue

@@ -0,0 +1,36 @@
+<script setup>
+/* Properties for this component:
+ * 'data' (object): The command argument data.
+ */
+const props = defineProps(['data'])
+const d = props.data
+</script>
+
+<template>
+ <div>
+  <ul>
+   <li>Usage: <code>doveadm {{ d.usage }}</code></li>
+  </ul>
+
+  <table v-if="d.args">
+   <thead>
+    <tr>
+     <th>Argument(s)</th>
+     <th>Type</th>
+     <th>Description</th>
+     <th>Example</th>
+    </tr>
+   </thead>
+   <tbody>
+    <template v-for="elem in d.args">
+     <tr>
+      <td><code>{{ elem.flag }}</code></td>
+      <td>{{ elem.type }}</td>
+      <td v-html="elem.text" />
+      <td><code v-if="elem.example !== undefined">{{ JSON.stringify(elem.example) }}</code></td>
+     </tr>
+    </template>
+   </tbody>
+  </table>
+ </div>
+</template>

components/DoveadmComponent.vue

@@ -18,9 +18,14 @@ const d = Object.fromEntries(Object.entries(data.doveadm).filter(([k, v]) =>
 	  (v.tags.includes(props.tag))))
 ).sort())
 
-let apiComponent = ref({})
-function httpApiClick(k) {
-	apiComponent.value[k] = 'DoveadmHttpApiComponent'
+const cliComponent = ref({})
+function cliClick(k) {
+	cliComponent.value[k] = 'DoveadmCliComponent'
+}
+
+const httpComponent = ref({})
+function httpClick(k) {
+	httpComponent.value[k] = 'DoveadmHttpApiComponent'
 }
 </script>
 
@@ -99,41 +104,15 @@ function httpApiClick(k) {
 
    <div v-if="v.text" v-html="v.text" />
 
-   <div class="info custom-block">
-    <p class="custom-block-title">CLI</p>
-    <div>
-     <ul>
-      <li>Usage: <code>doveadm {{ v.usage }}</code></li>
-     </ul>
-
-     <table v-if="v.args">
-      <thead>
-       <tr>
-        <th>Argument(s)</th>
-        <th>Type</th>
-        <th>Description</th>
-        <th>Example</th>
-       </tr>
-      </thead>
-      <tbody>
-       <template v-for="elem in v.args">
-        <tr>
-         <td><code>{{ elem.flag }}</code></td>
-         <td>{{ elem.type }}</td>
-         <td v-html="elem.text" />
-         <td><code v-if="elem.example !== undefined">{{ JSON.stringify(elem.example) }}</code></td>
-        </tr>
-       </template>
-      </tbody>
-     </table>
-    </div>
-   </div>
+   <details @click.capture.once="cliClick(k)" class="details custom-block">
+    <summary>CLI</summary>
+    <component v-if="cliComponent[k]" :is="cliComponent[k]" :data="v" />
+   </details>
 
-   <details v-if="v.args" @click.capture.once="httpApiClick(k)" class="details custom-block">
+   <details v-if="v.args" @click.capture.once="httpClick(k)" class="details custom-block">
     <summary v-html="data.http_api_link" />
-    <component v-if="apiComponent[k]" :is="apiComponent[k]" :data="v" />
+    <component v-if="httpComponent[k]" :is="httpComponent[k]" :data="v" />
    </details>
-
   </article>
  </section>
 </template>