From cbf99d2daf8a3e566a212971cd82118d0a0ba3b5 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 8 Aug 2021 22:44:05 +0530
Subject: [PATCH] feat: auto focus directive, auto focus primary action by
 default

---
 components/app/Shortcuts.vue                   |  1 +
 components/collections/Add.vue                 |  1 +
 components/collections/AddFolder.vue           |  1 +
 components/collections/Edit.vue                |  1 +
 components/collections/EditFolder.vue          |  1 +
 components/collections/EditRequest.vue         |  1 +
 components/collections/SaveRequest.vue         |  1 +
 components/collections/graphql/Add.vue         |  1 +
 components/collections/graphql/AddFolder.vue   |  1 +
 components/collections/graphql/Edit.vue        |  1 +
 components/collections/graphql/EditFolder.vue  |  1 +
 components/collections/graphql/EditRequest.vue |  1 +
 components/environments/Add.vue                |  1 +
 components/environments/Edit.vue               |  1 +
 components/firebase/Login.vue                  |  1 +
 components/http/Request.vue                    |  1 +
 components/realtime/Mqtt.vue                   |  1 +
 components/realtime/Socketio.vue               |  1 +
 components/realtime/Sse.vue                    |  1 +
 components/realtime/Websocket.vue              |  1 +
 components/smart/ConfirmModal.vue              |  2 +-
 components/smart/EnvInput.vue                  | 10 +++++-----
 components/smart/__tests__/UrlField.spec.js    |  2 +-
 components/teams/Add.vue                       |  1 +
 components/teams/Edit.vue                      |  1 +
 nuxt.config.js                                 |  1 +
 pages/graphql.vue                              |  1 +
 plugins/v-focus.js                             |  7 +++++++
 28 files changed, 38 insertions(+), 7 deletions(-)
 create mode 100644 plugins/v-focus.js

diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue
index 7ec5c55bf..a890945b5 100644
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -23,6 +23,7 @@
       <!-- <div class="search-wrapper">
         <input
           v-model="filterText"
+          v-focus
           type="search"
           class="bg-primaryLight border-b border-dividerLight flex font-semibold font-mono w-full py-2 pr-2 pl-8 truncate focus:outline-none"
           :placeholder="$t('search')"
diff --git a/components/collections/Add.vue b/components/collections/Add.vue
index 273df9139..a93c72a54 100644
--- a/components/collections/Add.vue
+++ b/components/collections/Add.vue
@@ -5,6 +5,7 @@
         <input
           id="selectLabelAdd"
           v-model="name"
+          v-focus
           class="input floating-input"
           placeholder=" "
           type="text"
diff --git a/components/collections/AddFolder.vue b/components/collections/AddFolder.vue
index 4278983cb..005ca5725 100644
--- a/components/collections/AddFolder.vue
+++ b/components/collections/AddFolder.vue
@@ -9,6 +9,7 @@
         <input
           id="selectLabelAddFolder"
           v-model="name"
+          v-focus
           class="input floating-input"
           placeholder=" "
           type="text"
diff --git a/components/collections/Edit.vue b/components/collections/Edit.vue
index 5e94f1dff..9f7edce35 100644
--- a/components/collections/Edit.vue
+++ b/components/collections/Edit.vue
@@ -5,6 +5,7 @@
         <input
           id="selectLabelEdit"
           v-model="name"
+          v-focus
           class="input floating-input"
           placeholder=" "
           type="text"
diff --git a/components/collections/EditFolder.vue b/components/collections/EditFolder.vue
index 39fcd8d4a..d68c7cc80 100644
--- a/components/collections/EditFolder.vue
+++ b/components/collections/EditFolder.vue
@@ -9,6 +9,7 @@
         <input
           id="selectLabelEditFolder"
           v-model="name"
+          v-focus
           class="input floating-input"
           placeholder=" "
           type="text"
diff --git a/components/collections/EditRequest.vue b/components/collections/EditRequest.vue
index fe2e0f387..fddbd0b45 100644
--- a/components/collections/EditRequest.vue
+++ b/components/collections/EditRequest.vue
@@ -5,6 +5,7 @@
         <input
           id="selectLabelEditReq"
           v-model="requestUpdateData.name"
+          v-focus
           class="input floating-input"
           placeholder=" "
           type="text"
diff --git a/components/collections/SaveRequest.vue b/components/collections/SaveRequest.vue
index 88d7d82d8..55e55a76b 100644
--- a/components/collections/SaveRequest.vue
+++ b/components/collections/SaveRequest.vue
@@ -6,6 +6,7 @@
           <input
             id="selectLabelSaveReq"
             v-model="requestName"
+            v-focus
             class="input floating-input"
             placeholder=" "
             type="text"
diff --git a/components/collections/graphql/Add.vue b/components/collections/graphql/Add.vue
index 0ce9ea1e4..7be91b996 100644
--- a/components/collections/graphql/Add.vue
+++ b/components/collections/graphql/Add.vue
@@ -5,6 +5,7 @@
         <input
           id="selectLabelGqlAdd"
           v-model="name"
+          v-focus
           class="input floating-input"
           placeholder=" "
           type="text"
diff --git a/components/collections/graphql/AddFolder.vue b/components/collections/graphql/AddFolder.vue
index 816d42858..059cedd22 100644
--- a/components/collections/graphql/AddFolder.vue
+++ b/components/collections/graphql/AddFolder.vue
@@ -9,6 +9,7 @@
         <input
           id="selectLabelGqlAddFolder"
           v-model="name"
+          v-focus
           class="input floating-input"
           placeholder=" "
           type="text"
diff --git a/components/collections/graphql/Edit.vue b/components/collections/graphql/Edit.vue
index 47c51110f..9bfd9cc37 100644
--- a/components/collections/graphql/Edit.vue
+++ b/components/collections/graphql/Edit.vue
@@ -5,6 +5,7 @@
         <input
           id="selectLabelGqlEdit"
           v-model="name"
+          v-focus
           class="input floating-input"
           placeholder=" "
           type="text"
diff --git a/components/collections/graphql/EditFolder.vue b/components/collections/graphql/EditFolder.vue
index 8579081aa..36ca02975 100644
--- a/components/collections/graphql/EditFolder.vue
+++ b/components/collections/graphql/EditFolder.vue
@@ -9,6 +9,7 @@
         <input
           id="selectLabelGqlEditFolder"
           v-model="name"
+          v-focus
           class="input floating-input"
           placeholder=" "
           type="text"
diff --git a/components/collections/graphql/EditRequest.vue b/components/collections/graphql/EditRequest.vue
index 2b817e1f0..9e5c584da 100644
--- a/components/collections/graphql/EditRequest.vue
+++ b/components/collections/graphql/EditRequest.vue
@@ -5,6 +5,7 @@
         <input
           id="selectLabelGqlEditReq"
           v-model="requestUpdateData.name"
+          v-focus
           class="input floating-input"
           placeholder=" "
           type="text"
diff --git a/components/environments/Add.vue b/components/environments/Add.vue
index c46b5bbf4..2769949fc 100644
--- a/components/environments/Add.vue
+++ b/components/environments/Add.vue
@@ -5,6 +5,7 @@
         <input
           id="selectLabelEnvAdd"
           v-model="name"
+          v-focus
           class="input floating-input"
           placeholder=" "
           type="text"
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index 13e7c6cd2..50cf7eb70 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -6,6 +6,7 @@
           <input
             id="selectLabelEnvEdit"
             v-model="name"
+            v-focus
             class="input floating-input"
             placeholder=" "
             type="text"
diff --git a/components/firebase/Login.vue b/components/firebase/Login.vue
index 5106b077f..c71c581f2 100644
--- a/components/firebase/Login.vue
+++ b/components/firebase/Login.vue
@@ -30,6 +30,7 @@
           <input
             id="email"
             v-model="form.email"
+            v-focus
             class="input floating-input"
             placeholder=" "
             type="email"
diff --git a/components/http/Request.vue b/components/http/Request.vue
index c2b5aee5a..6079e4881 100644
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -66,6 +66,7 @@
         v-else
         id="url"
         v-model="newEndpoint"
+        v-focus
         class="
           bg-primaryLight
           border border-divider
diff --git a/components/realtime/Mqtt.vue b/components/realtime/Mqtt.vue
index 002c5c0a6..84799d8aa 100644
--- a/components/realtime/Mqtt.vue
+++ b/components/realtime/Mqtt.vue
@@ -9,6 +9,7 @@
                 <input
                   id="mqtt-url"
                   v-model="url"
+                  v-focus
                   type="url"
                   spellcheck="false"
                   class="
diff --git a/components/realtime/Socketio.vue b/components/realtime/Socketio.vue
index c0e607327..29c1b0e9e 100644
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -9,6 +9,7 @@
                 <input
                   id="socketio-url"
                   v-model="url"
+                  v-focus
                   type="url"
                   spellcheck="false"
                   :class="{ error: !urlValid }"
diff --git a/components/realtime/Sse.vue b/components/realtime/Sse.vue
index 5d04fc88e..59670f2c7 100644
--- a/components/realtime/Sse.vue
+++ b/components/realtime/Sse.vue
@@ -6,6 +6,7 @@
           <input
             id="server"
             v-model="server"
+            v-focus
             type="url"
             :class="{ error: !serverValid }"
             class="
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index 2ad0ec4a2..ec5c24eee 100644
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -9,6 +9,7 @@
                 <input
                   id="websocket-url"
                   v-model="url"
+                  v-focus
                   class="
                     bg-primaryLight
                     border border-divider
diff --git a/components/smart/ConfirmModal.vue b/components/smart/ConfirmModal.vue
index 24ea4f65e..21fc1341b 100644
--- a/components/smart/ConfirmModal.vue
+++ b/components/smart/ConfirmModal.vue
@@ -9,7 +9,7 @@
     </template>
     <template #footer>
       <span>
-        <ButtonPrimary :label="yes" @click.native="resolve" />
+        <ButtonPrimary v-focus :label="yes" @click.native="resolve" />
         <ButtonSecondary :label="no" @click.native="hideModal" />
       </span>
     </template>
diff --git a/components/smart/EnvInput.vue b/components/smart/EnvInput.vue
index 593420795..6f5b12aca 100644
--- a/components/smart/EnvInput.vue
+++ b/components/smart/EnvInput.vue
@@ -4,11 +4,11 @@
 -->
 
 <template>
-  <div class="url-field-container">
+  <div class="env-input-container">
     <div
       ref="editor"
       :placeholder="placeholder"
-      class="url-field"
+      class="env-input"
       :class="styles"
       contenteditable="true"
       @keydown.enter.prevent="$emit('enter', $event)"
@@ -477,12 +477,12 @@ export default defineComponent({
   }
 }
 
-.url-field-container {
+.env-input-container {
   @apply inline-grid;
   @apply w-full;
 }
 
-.url-field {
+.env-input {
   @apply flex;
   @apply items-center;
   @apply justify-items-start;
@@ -492,7 +492,7 @@ export default defineComponent({
   @apply resize-none;
 }
 
-.url-field::-webkit-scrollbar {
+.env-input::-webkit-scrollbar {
   @apply hidden;
 }
 </style>
diff --git a/components/smart/__tests__/UrlField.spec.js b/components/smart/__tests__/UrlField.spec.js
index 5219a3f16..79764f04e 100644
--- a/components/smart/__tests__/UrlField.spec.js
+++ b/components/smart/__tests__/UrlField.spec.js
@@ -12,7 +12,7 @@ const factory = (props) =>
  * inputting values.
  */
 
-describe("url-field", () => {
+describe("env-input", () => {
   test("mounts properly", () => {
     const wrapper = factory({
       value: "test",
diff --git a/components/teams/Add.vue b/components/teams/Add.vue
index 1fc63678d..c8e408f2d 100644
--- a/components/teams/Add.vue
+++ b/components/teams/Add.vue
@@ -5,6 +5,7 @@
         <input
           id="selectLabelTeamAdd"
           v-model="name"
+          v-focus
           class="input floating-input"
           placeholder=" "
           type="text"
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index 4d656a710..ac6bf1b6f 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -5,6 +5,7 @@
         <input
           id="selectLabelTeamEdit"
           v-model="name"
+          v-focus
           class="input floating-input"
           placeholder=" "
           type="text"
diff --git a/nuxt.config.js b/nuxt.config.js
index 30346579d..431e36e06 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -94,6 +94,7 @@ export default {
   // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
   plugins: [
     "~/plugins/v-tippy",
+    "~/plugins/v-focus",
     "~/plugins/vuex-persist",
     "~/plugins/vue-rx",
     "~/plugins/vue-apollo",
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 42aa18757..9457bb304 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -9,6 +9,7 @@
                 <input
                   id="url"
                   v-model="url"
+                  v-focus
                   type="url"
                   spellcheck="false"
                   class="
diff --git a/plugins/v-focus.js b/plugins/v-focus.js
new file mode 100644
index 000000000..0870ca5f9
--- /dev/null
+++ b/plugins/v-focus.js
@@ -0,0 +1,7 @@
+import Vue from "vue"
+
+Vue.directive("focus", {
+  inserted: (el) => {
+    Vue.nextTick(() => el.focus())
+  },
+})