feat: environment aware smart input in parameters and headers

2021-08-01 13:07:07 +05:30
parent fcb194d08a
commit 1e4bb65db2
6 changed files with 133 additions and 43 deletions
--- a/components/http/Headers.vue
+++ b/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: {
--- a/components/http/Parameters.vue
+++ b/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: {
--- a/components/http/Request.vue
+++ b/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,
    }
  },
--- a/components/smart/AutoComplete.vue
+++ b/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 {
--- a/components/smart/EnvInput.vue
+++ b/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 {
-  @apply h-8;
+[contenteditable="true"] {
+  &:empty {
+    line-height: 1.9;

-  line-height: 1.9;
+    &::before {
+      @apply text-secondary;
+      @apply opacity-75;
+      @apply pointer-events-none;

-  &::before {
-    @apply text-secondary;
-    @apply opacity-75;
-    @apply pointer-events-none;
-    @apply block;
-
-    content: attr(placeholder);
+      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;
 }

--- a/layouts/error.vue
+++ b/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