feat: environment aware smart input in parameters and headers

components/http/Headers.vue

@@ -43,6 +43,15 @@
         :spellcheck="false"
         :value="header.key"
         autofocus
+        styles="
+          bg-primaryLight
+          flex
+          font-semibold font-mono
+          flex-1
+          py-1
+          px-4
+          focus:outline-none
+        "
         @input="
           updateHeader(index, {
             key: $event,
@@ -51,7 +60,29 @@
           })
         "
       />
+      <SmartEnvInput
+        v-if="EXPERIMENTAL_URL_BAR_ENABLED"
+        v-model="header.value"
+        :placeholder="$t('value_count', { count: index + 1 })"
+        styles="
+          bg-primaryLight
+          flex
+          font-semibold font-mono
+          flex-1
+          py-1
+          px-4
+          focus:outline-none
+        "
+        @change="
+          updateHeader(index, {
+            key: header.key,
+            value: $event.target.value,
+            active: header.active,
+          })
+        "
+      />
       <input
+        v-else
         class="
           bg-primaryLight
           flex
@@ -131,6 +162,7 @@ import {
 } from "~/newstore/RESTSession"
 
 import { commonHeaders } from "~/helpers/headers"
+import { getSettingSubject } from "~/newstore/settings"
 
 export default {
   data() {
@@ -141,6 +173,9 @@ export default {
   subscriptions() {
     return {
       headers$: restHeaders$,
+      EXPERIMENTAL_URL_BAR_ENABLED: getSettingSubject(
+        "EXPERIMENTAL_URL_BAR_ENABLED"
+      ),
     }
   },
   // watch: {

components/http/Parameters.vue

@@ -37,7 +37,29 @@
       class="divide-x divide-dividerLight border-b border-dividerLight flex"
       :class="{ 'border-t': index == 0 }"
     >
+      <SmartEnvInput
+        v-if="EXPERIMENTAL_URL_BAR_ENABLED"
+        v-model="param.key"
+        :placeholder="$t('parameter_count', { count: index + 1 })"
+        styles="
+          bg-primaryLight
+          flex
+          font-semibold font-mono
+          flex-1
+          py-1
+          px-4
+          focus:outline-none
+        "
+        @change="
+          updateParam(index, {
+            key: $event.target.value,
+            value: param.value,
+            active: param.active,
+          })
+        "
+      />
       <input
+        v-else
         class="
           bg-primaryLight
           flex
@@ -59,7 +81,29 @@
           })
         "
       />
+      <SmartEnvInput
+        v-if="EXPERIMENTAL_URL_BAR_ENABLED"
+        v-model="param.value"
+        :placeholder="$t('value_count', { count: index + 1 })"
+        styles="
+          bg-primaryLight
+          flex
+          font-semibold font-mono
+          flex-1
+          py-1
+          px-4
+          focus:outline-none
+        "
+        @change="
+          updateParam(index, {
+            key: param.key,
+            value: $event.target.value,
+            active: param.active,
+          })
+        "
+      />
       <input
+        v-else
         class="
           bg-primaryLight
           flex
@@ -137,6 +181,7 @@ import {
   deleteRESTParam,
   deleteAllRESTParams,
 } from "~/newstore/RESTSession"
+import { getSettingSubject } from "~/newstore/settings"
 
 export default {
   data() {
@@ -147,6 +192,9 @@ export default {
   subscriptions() {
     return {
       params$: restParams$,
+      EXPERIMENTAL_URL_BAR_ENABLED: getSettingSubject(
+        "EXPERIMENTAL_URL_BAR_ENABLED"
+      ),
     }
   },
   // watch: {

components/http/Request.vue

@@ -3,7 +3,7 @@
     <div class="relative inline-flex">
       <span class="select-wrapper">
         <tippy
-          ref="options"
+          ref="methodOptions"
           interactive
           tabindex="-1"
           trigger="click"
@@ -44,9 +44,23 @@
       </span>
     </div>
     <div class="flex-1 inline-flex">
-      <SmartUrlField
+      <SmartEnvInput
         v-if="EXPERIMENTAL_URL_BAR_ENABLED"
         v-model="newEndpoint"
+        :placeholder="$t('url')"
+        styles="
+          bg-primaryLight
+          border border-divider
+          flex
+          font-semibold font-mono
+          flex-1
+          text-secondaryDark
+          py-1
+          px-4
+          transition
+          truncate
+          focus:outline-none focus:border-accent
+        "
         @enter="newSendRequest()"
       />
       <input
@@ -242,8 +256,9 @@ export default defineComponent({
 
     // Template refs
     //
-    const options = ref<any | null>(null)
+    const methodOptions = ref<any | null>(null)
     const saveOptions = ref<any | null>(null)
+    const sendOptions = ref<any | null>(null)
 
     const newSendRequest = () => {
       loading.value = true
@@ -279,7 +294,7 @@ export default defineComponent({
     const onSelectMethod = (method: string) => {
       updateMethod(method)
       // Vue-tippy has no typescript support yet
-      options.value.tippy().hide()
+      methodOptions.value.tippy().hide()
     }
 
     const clearContent = () => {
@@ -369,7 +384,8 @@ export default defineComponent({
       EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
 
       // Template refs
-      options,
+      methodOptions,
+      sendOptions,
       saveOptions,
     }
   },