Initial Headers component

assets/css/styles.scss

@@ -535,11 +535,6 @@ ol {
   padding: 0;
   list-style-type: none;
 
-  &.response-headers {
-    display: inline-flex;
-    width: 50%;
-  }
-
   ul,
   ol {
     margin: 0;

components/lenses/ResponseBodyRenderer.vue

@@ -10,6 +10,13 @@
       >
         <component :is="lens.renderer" :response="response" />
       </tab>
+      <tab
+        v-if="Object.keys(response.headers).length !== 0"
+        id="headers"
+        :label="`Headers \xA0 • \xA0 ${Object.keys(response.headers).length}`"
+      >
+        <headers :headers="response.headers" />
+      </tab>
     </tabs>
   </div>
 </template>
@@ -22,11 +29,12 @@ export default {
     tabs: () => import("../ui/tabs"),
     tab: () => import("../ui/tab"),
     // Lens Renderers
-    raw: () => import("../lenses/renderers/RawLensRenderer"),
-    json: () => import("../lenses/renderers/JSONLensRenderer"),
-    imageres: () => import("../lenses/renderers/ImageLensRenderer"),
-    htmlres: () => import("../lenses/renderers/HTMLLensRenderer"),
-    xmlres: () => import("../lenses/renderers/XMLLensRenderer"),
+    raw: () => import("./renderers/RawLensRenderer"),
+    json: () => import("./renderers/JSONLensRenderer"),
+    imageres: () => import("./renderers/ImageLensRenderer"),
+    htmlres: () => import("./renderers/HTMLLensRenderer"),
+    xmlres: () => import("./renderers/XMLLensRenderer"),
+    headers: () => import("./headers"),
   },
   props: {
     response: {},

components/lenses/headers.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <ul v-for="(value, key) in headers" :key="key">
+      <li>
+        <input :value="`${key} → ${value}`" :name="key" class="bg-color" readonly />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    headers: {},
+  },
+}
+</script>

pages/index.vue

@@ -940,12 +940,6 @@
           <div v-if="response.body && response.body !== $t('loading')">
             <response-renderer :response="response" />
           </div>
-          <ul v-for="(value, key) in response.headers" :key="key" class="response-headers">
-            <li>
-              <label :for="key">{{ key }}</label>
-              <input :id="key" :value="value" :name="key" readonly />
-            </li>
-          </ul>
         </pw-section>
       </div>