refactor(ui): popovers

components/http/BodyParameters.vue

@@ -68,13 +68,13 @@
         <li>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            title="{
-              content: param.hasOwnProperty('active')
+            :title="
+              param.hasOwnProperty('active')
                 ? param.active
                   ? $t('turn_off')
                   : $t('turn_on')
-                : $t('turn_off'),
-            }"
+                : $t('turn_off')
+            "
             :icon="
               param.hasOwnProperty('active')
                 ? param.active

components/http/CodegenModal.vue

@@ -9,7 +9,13 @@
     <template #body>
       <label for="requestType">{{ $t("choose_language") }}</label>
       <span class="select-wrapper">
-        <tippy tabindex="-1" trigger="click" theme="popover" arrow>
+        <tippy
+          ref="options"
+          tabindex="-1"
+          trigger="click"
+          theme="popover"
+          arrow
+        >
           <template #trigger>
             <pre v-if="requestType">{{
               codegens.find((x) => x.id === requestType).name
@@ -24,10 +30,15 @@
               autofocus
             />
           </template>
-          <div v-for="gen in codegens" :key="gen.id">
-            <ButtonSecondary @click.native="requestType = gen.id" />
-            {{ gen.name }}
-          </div>
+          <SmartItem
+            v-for="gen in codegens"
+            :key="gen.id"
+            :label="gen.name"
+            @click.native="
+              requestType = gen.id
+              $refs.options.tippy().hide()
+            "
+          />
         </tippy>
       </span>
       <div class="row-wrapper">

components/http/Headers.vue

@@ -63,13 +63,13 @@
         <li>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            title="{
-              content: header.hasOwnProperty('active')
+            :title="
+              header.hasOwnProperty('active')
                 ? header.active
                   ? $t('turn_off')
                   : $t('turn_on')
-                : $t('turn_off'),
-            }"
+                : $t('turn_off')
+            "
             :icon="
               param.hasOwnProperty('active')
                 ? param.active

components/http/Parameters.vue

@@ -82,13 +82,13 @@
         <li>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            title="{
-              content: param.hasOwnProperty('active')
+            :title="
+              param.hasOwnProperty('active')
                 ? param.active
                   ? $t('turn_off')
                   : $t('turn_on')
-                : $t('turn_off'),
-            }"
+                : $t('turn_off')
+            "
             :icon="
               param.hasOwnProperty('active')
                 ? param.active