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,
     }
   },

components/smart/AutoComplete.vue

@@ -3,15 +3,6 @@
     <input
       ref="acInput"
       v-model="text"
-      class="
-        bg-primaryLight
-        flex
-        font-semibold font-mono
-        flex-1
-        py-2
-        px-4
-        focus:outline-none
-      "
       type="text"
       :placeholder="placeholder"
       :spellcheck="spellcheck"
@@ -196,7 +187,8 @@ export default {
 <style scoped lang="scss">
 .autocomplete-wrapper {
   @apply relative;
-  @apply flex flex-1;
+  @apply flex;
+  @apply w-full;
 
   input:focus + ul.suggestions,
   ul.suggestions:hover {

components/smart/EnvInput.vue

@@ -7,10 +7,15 @@
   <div class="url-field-container">
     <div
       ref="editor"
-      :placeholder="$t('url')"
+      :placeholder="placeholder"
       class="url-field"
+      :class="styles"
       contenteditable="true"
-      @keyup.enter="$emit('enter')"
+      @keyup.enter="$emit('enter', $event)"
+      @change="$emit('change', $event)"
+      @keyup="$emit('keyup', $event)"
+      @click="$emit('click', $event)"
+      @keydown="$emit('keydown', $event)"
     ></div>
   </div>
 </template>
@@ -32,6 +37,14 @@ export default {
       type: String,
       default: "",
     },
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    styles: {
+      type: String,
+      default: "",
+    },
   },
   data() {
     return {
@@ -41,7 +54,7 @@ export default {
       highlight: [
         {
           text: /(<<\w+>>)/g,
-          style: "text-white bg-accentDark rounded px-1.5 py-0.5 mx-0.5",
+          style: "text-white bg-accentDark rounded px-1 mx-0.5",
         },
       ],
       highlightEnabled: true,
@@ -396,18 +409,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-[contenteditable="true"]:empty {
+[contenteditable="true"] {
-  @apply h-8;
+  &:empty {
+    line-height: 1.9;
 
-  line-height: 1.9;
+    &::before {
+      @apply text-secondary;
+      @apply opacity-75;
+      @apply pointer-events-none;
 
-  &::before {
+      content: attr(placeholder);
-    @apply text-secondary;
+    }
-    @apply opacity-75;
-    @apply pointer-events-none;
-    @apply block;
-
-    content: attr(placeholder);
   }
 }
 
@@ -420,22 +432,9 @@ export default {
   @apply flex;
   @apply items-center;
   @apply justify-items-start;
-  @apply bg-primaryLight;
-  @apply border;
-  @apply border-divider;
-  @apply font-semibold;
-  @apply font-mono;
-  @apply flex-1;
-  @apply text-secondaryDark;
-  @apply py-1;
-  @apply px-4;
-  @apply transition;
-  @apply truncate;
-  @apply focus:outline-none;
-  @apply focus:border-accent;
-  @apply truncate;
   @apply whitespace-nowrap;
   @apply overflow-x-auto;
+  @apply overflow-y-hidden;
   @apply resize-none;
 }
 

layouts/error.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page page-error">
     <h1 class="font-mono mb-4 text-4xl heading">{{ statusCode }}</h1>
-    <h3 class="font-mono font-semibold text-xs">{{ message }}</h3>
+    <h3 class="font-mono font-semibold text-xs select-text">{{ message }}</h3>
     <p class="mt-4">
       <ButtonSecondary to="/" icon="home" :label="$t('go_home')" />
       <ButtonSecondary