✨ Added icon slot to tabs

pages/graphql.vue

@@ -263,25 +263,34 @@
           <section>
             <tabs ref="gqlTabs">
               <div class="gqlTabs">
-                <tab v-if="queryFields.length > 0" :name="$t('queries')" :selected="true">
+                <tab
+                  v-if="queryFields.length > 0"
+                  :id="'queries'"
+                  :label="$t('queries')"
+                  :selected="true"
+                >
                   <div v-for="field in queryFields" :key="field.name">
                     <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
                   </div>
                 </tab>
 
-                <tab v-if="mutationFields.length > 0" :name="$t('mutations')">
+                <tab v-if="mutationFields.length > 0" :id="'mutations'" :label="$t('mutations')">
                   <div v-for="field in mutationFields" :key="field.name">
                     <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
                   </div>
                 </tab>
 
-                <tab v-if="subscriptionFields.length > 0" :name="$t('subscriptions')">
+                <tab
+                  v-if="subscriptionFields.length > 0"
+                  :id="'subscriptions'"
+                  :label="$t('subscriptions')"
+                >
                   <div v-for="field in subscriptionFields" :key="field.name">
                     <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
                   </div>
                 </tab>
 
-                <tab v-if="gqlTypes.length > 0" :name="$t('types')" ref="typesTab">
+                <tab v-if="gqlTypes.length > 0" :id="'types'" :label="$t('types')" ref="typesTab">
                   <div v-for="type in gqlTypes" :key="type.name" :id="`type_${type.name}`">
                     <gql-type :gqlType="type" :jumpTypeCallback="handleJumpToType" />
                   </div>

pages/index.vue

@@ -512,7 +512,7 @@
 
         <section id="options">
           <tabs>
-            <tab :name="$t('authentication')" :selected="true">
+            <tab :id="'authentication'" :label="$t('authentication')" :selected="true">
               <pw-section class="cyan" :label="$t('authentication')" ref="authentication">
                 <ul>
                   <li>
@@ -716,7 +716,7 @@
               </pw-section>
             </tab>
 
-            <tab :name="$t('headers')">
+            <tab :id="'headers'" :label="$t('headers')">
               <pw-section class="orange" label="Headers" ref="headers">
                 <ul>
                   <li>
@@ -797,7 +797,7 @@
               </pw-section>
             </tab>
 
-            <tab :name="$t('parameters')">
+            <tab :id="'params'" :label="$t('parameters')">
               <pw-section class="pink" label="Parameters" ref="parameters">
                 <ul>
                   <li>
@@ -990,19 +990,19 @@
       <aside v-if="activeSidebar" class="sticky-inner inner-right">
         <section>
           <tabs>
-            <tab :name="$t('history')" :selected="true">
+            <tab :id="'history'" :icon="'watch_later'" :label="$t('history')" :selected="true">
               <history @useHistory="handleUseHistory" ref="historyComponent" />
             </tab>
 
-            <tab :name="$t('collections')">
+            <tab :id="'collections'" :icon="'folder_special'" :label="$t('collections')">
               <collections />
             </tab>
 
-            <tab :name="$t('environment')">
+            <tab :id="'env'" :icon="'style'" :label="$t('environments')">
               <environments @use-environment="useSelectedEnvironment($event)" />
             </tab>
 
-            <tab :name="$t('notes')">
+            <tab :id="'notes'" :icon="'note'" :label="$t('notes')">
               <pw-section class="pink" :label="$t('notes')" ref="sync">
                 <div v-if="fb.currentUser">
                   <inputform />

pages/realtime.vue

@@ -2,7 +2,7 @@
   <div class="page">
     <section id="options">
       <tabs>
-        <tab :name="$t('websocket')" :selected="true">
+        <tab :id="'websocket'" :label="$t('websocket')" :selected="true">
           <pw-section class="blue" :label="$t('request')" ref="request">
             <ul>
               <li>
@@ -70,7 +70,7 @@
           </pw-section>
         </tab>
 
-        <tab :name="$t('sse')">
+        <tab :id="'sse'" :label="$t('sse')">
           <pw-section class="blue" :label="$t('request')" ref="request">
             <ul>
               <li>
@@ -114,7 +114,7 @@
           </pw-section>
         </tab>
 
-        <tab :name="$t('socketio')">
+        <tab :id="'socketio'" :label="$t('socketio')">
           <socketio />
         </tab>
       </tabs>