refactor(gui): linting

Signed-off-by: Pranav C <61551451+pranavxc@users.noreply.github.com>

packages/nc-gui/components/apiClient/headers.vue

@@ -1,66 +1,70 @@
 <template>
   <v-container fluid>
     <v-simple-table class="ignore-height-style" dense>
-      <template v-slot:default>
+      <template #default>
         <thead>
-        <tr>
-          <th class="text-left caption" width="5%"></th>
-          <th class="text-left caption">Header Name</th>
-          <th class="text-left caption">Value</th>
-          <th class="text-left caption" width="5%"></th>
-        </tr>
+          <tr>
+            <th class="text-left caption" width="5%" />
+            <th class="text-left caption">
+              Header Name
+            </th>
+            <th class="text-left caption">
+              Value
+            </th>
+            <th class="text-left caption" width="5%" />
+          </tr>
         </thead>
         <draggable v-if="value" v-model="headersList" tag="tbody">
           <tr v-for="(item,i) in headersList" :key="i">
-
             <td>
               <v-checkbox
+                v-model="item.enabled"
                 v-ge="['api-client-headers','enable']"
                 small
                 class="mt-0"
                 color="primary lighten-1"
                 hide-details
-                v-model="item.enabled" dense></v-checkbox>
+                dense
+              />
             </td>
             <td>
-
               <v-combobox
+                v-model="item.name"
                 v-ge="['api-client-headers','enable']"
                 class="body-2 caption"
                 :items="headerListAuto"
-                v-model="item.name"
                 :disabled="!item.enabled"
                 hide-details
                 single-line
                 dense
                 placeholder="Key"
                 @update:search-input="e => { if(i === value.length - 1 && e && e.length) value.push({name:'',value:'',
-          enabled:true}) }"
-              ></v-combobox>
-
+                                                                                                     enabled:true}) }"
+              />
             </td>
             <td style="height: auto">
-
               <xAutoComplete
+                v-model="item.value"
                 class="body-2 caption"
                 :disabled="!item.enabled"
-                v-model="item.value"
                 placeholder="Value"
                 hide-details
                 single-line
                 dense
                 :env="env"
-              ></xAutoComplete>
-
+              />
             </td>
             <td class="">
               <x-icon
                 v-ge="['api-client-headers','delete']"
                 color="error grey"
-                small @click="value.splice(i,1)" tooltip="Delete param">mdi-delete-outline
+                small
+                tooltip="Delete param"
+                @click="value.splice(i,1)"
+              >
+                mdi-delete-outline
               </x-icon>
             </td>
-
           </tr>
         </draggable>
       </template>
@@ -70,62 +74,63 @@
 
 <script>
 
-  import draggable from "vuedraggable";
+import draggable from 'vuedraggable'
 
-
-  export default {
-    data() {
-      return {
-        headerListAuto: ["A-IM", "Accept", "Accept-Charset", "Accept-Encoding", "Accept-Language", "Accept-Datetime", "Access-Control-Request-Method", "Access-Control-Request-Headers", "Authorization", "Cache-Control", "Connection", "Content-Length", "Content-Type", "Cookie", "Date", "Expect", "Forwarded", "From", "Host", "If-Match", "If-Modified-Since", "If-None-Match", "If-Range", "If-Unmodified-Since", "Max-Forwards", "Origin", "Pragma", "Proxy-Authorization", "Range", "Referer", "TE", "User-Agent", "Upgrade", "Via", "Warning", "Non-standard headers", "Dnt", "X-Requested-With", "X-CSRF-Token"]
-      };
-    },
-    methods: {},
-    computed: {
-      headersList: {
-        // two way binding(v-model)
-        get() {
-          return this.value
-        },
-        set(value) {
-          this.$emit('input', value)
-        }
+export default {
+  directives: {},
+  components: { draggable },
+  validate ({ params }) {
+    return true
+  },
+  props: { value: Array, env: String },
+  data () {
+    return {
+      headerListAuto: ['A-IM', 'Accept', 'Accept-Charset', 'Accept-Encoding', 'Accept-Language', 'Accept-Datetime', 'Access-Control-Request-Method', 'Access-Control-Request-Headers', 'Authorization', 'Cache-Control', 'Connection', 'Content-Length', 'Content-Type', 'Cookie', 'Date', 'Expect', 'Forwarded', 'From', 'Host', 'If-Match', 'If-Modified-Since', 'If-None-Match', 'If-Range', 'If-Unmodified-Since', 'Max-Forwards', 'Origin', 'Pragma', 'Proxy-Authorization', 'Range', 'Referer', 'TE', 'User-Agent', 'Upgrade', 'Via', 'Warning', 'Non-standard headers', 'Dnt', 'X-Requested-With', 'X-CSRF-Token']
+    }
+  },
+  head () {
+    return {}
+  },
+  computed: {
+    headersList: {
+      // two way binding(v-model)
+      get () {
+        return this.value
       },
-    },
-
-    beforeCreated() {
-    },
-    created() {
-      // keeps at least one param row
-      if (!this.value || !this.value.length) this.$emit('input', [{
+      set (value) {
+        this.$emit('input', value)
+      }
+    }
+  },
+  watch: {
+    value: {
+      handler (val) {
+        // keeps at least one param row
+        if (!val || !val.length) { this.$emit('input', [{ name: '', value: '', enabled: true }]) }
+      }
+    }
+  },
+  created () {
+    // keeps at least one param row
+    if (!this.value || !this.value.length) {
+      this.$emit('input', [{
         name: '',
         value: '',
         enabled: true
-      }]);
-    },
-    mounted() {
-    },
-    beforeDestroy() {
-    },
-    destroy() {
-    },
-    validate({params}) {
-      return true;
-    },
-    head() {
-      return {};
-    },
-    props: {'value': Array, env: String},
-    watch: {
-      value: {
-        handler(val) {
-          // keeps at least one param row
-          if (!val || !val.length) this.$emit('input', [{name: '', value: '', enabled: true}]);
-        }
-      },
-    },
-    directives: {},
-    components: {draggable}
-  };
+      }])
+    }
+  },
+  mounted () {
+  },
+  beforeDestroy () {
+  },
+  methods: {},
+
+  beforeCreated () {
+  },
+  destroy () {
+  }
+}
 </script>
 
 <style scoped>