feat: auto focus directive, auto focus primary action by default

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')"

components/collections/Add.vue

@@ -5,6 +5,7 @@
         <input
           id="selectLabelAdd"
           v-model="name"
+          v-focus
           class="input floating-input"
           placeholder=" "
           type="text"

components/collections/AddFolder.vue

@@ -9,6 +9,7 @@
         <input
           id="selectLabelAddFolder"
           v-model="name"
+          v-focus
           class="input floating-input"
           placeholder=" "
           type="text"

components/collections/Edit.vue

@@ -5,6 +5,7 @@
         <input
           id="selectLabelEdit"
           v-model="name"
+          v-focus
           class="input floating-input"
           placeholder=" "
           type="text"

components/collections/EditFolder.vue

@@ -9,6 +9,7 @@
         <input
           id="selectLabelEditFolder"
           v-model="name"
+          v-focus
           class="input floating-input"
           placeholder=" "
           type="text"

components/collections/EditRequest.vue

@@ -5,6 +5,7 @@
         <input
           id="selectLabelEditReq"
           v-model="requestUpdateData.name"
+          v-focus
           class="input floating-input"
           placeholder=" "
           type="text"

components/collections/SaveRequest.vue

@@ -6,6 +6,7 @@
           <input
             id="selectLabelSaveReq"
             v-model="requestName"
+            v-focus
             class="input floating-input"
             placeholder=" "
             type="text"

components/collections/graphql/Add.vue

@@ -5,6 +5,7 @@
         <input
           id="selectLabelGqlAdd"
           v-model="name"
+          v-focus
           class="input floating-input"
           placeholder=" "
           type="text"

components/collections/graphql/AddFolder.vue

@@ -9,6 +9,7 @@
         <input
           id="selectLabelGqlAddFolder"
           v-model="name"
+          v-focus
           class="input floating-input"
           placeholder=" "
           type="text"

components/collections/graphql/Edit.vue

@@ -5,6 +5,7 @@
         <input
           id="selectLabelGqlEdit"
           v-model="name"
+          v-focus
           class="input floating-input"
           placeholder=" "
           type="text"

components/collections/graphql/EditFolder.vue

@@ -9,6 +9,7 @@
         <input
           id="selectLabelGqlEditFolder"
           v-model="name"
+          v-focus
           class="input floating-input"
           placeholder=" "
           type="text"

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"

components/environments/Add.vue

@@ -5,6 +5,7 @@
         <input
           id="selectLabelEnvAdd"
           v-model="name"
+          v-focus
           class="input floating-input"
           placeholder=" "
           type="text"

components/environments/Edit.vue

@@ -6,6 +6,7 @@
           <input
             id="selectLabelEnvEdit"
             v-model="name"
+            v-focus
             class="input floating-input"
             placeholder=" "
             type="text"

components/firebase/Login.vue

@@ -30,6 +30,7 @@
           <input
             id="email"
             v-model="form.email"
+            v-focus
             class="input floating-input"
             placeholder=" "
             type="email"

components/http/Request.vue

@@ -66,6 +66,7 @@
         v-else
         id="url"
         v-model="newEndpoint"
+        v-focus
         class="
           bg-primaryLight
           border border-divider

components/realtime/Mqtt.vue

@@ -9,6 +9,7 @@
                 <input
                   id="mqtt-url"
                   v-model="url"
+                  v-focus
                   type="url"
                   spellcheck="false"
                   class="

components/realtime/Socketio.vue

@@ -9,6 +9,7 @@
                 <input
                   id="socketio-url"
                   v-model="url"
+                  v-focus
                   type="url"
                   spellcheck="false"
                   :class="{ error: !urlValid }"

components/realtime/Sse.vue

@@ -6,6 +6,7 @@
           <input
             id="server"
             v-model="server"
+            v-focus
             type="url"
             :class="{ error: !serverValid }"
             class="

components/realtime/Websocket.vue

@@ -9,6 +9,7 @@
                 <input
                   id="websocket-url"
                   v-model="url"
+                  v-focus
                   class="
                     bg-primaryLight
                     border border-divider

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>

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>

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

components/teams/Add.vue

@@ -5,6 +5,7 @@
         <input
           id="selectLabelTeamAdd"
           v-model="name"
+          v-focus
           class="input floating-input"
           placeholder=" "
           type="text"

components/teams/Edit.vue

@@ -5,6 +5,7 @@
         <input
           id="selectLabelTeamEdit"
           v-model="name"
+          v-focus
           class="input floating-input"
           placeholder=" "
           type="text"

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

pages/graphql.vue

@@ -9,6 +9,7 @@
                 <input
                   id="url"
                   v-model="url"
+                  v-focus
                   type="url"
                   spellcheck="false"
                   class="

plugins/v-focus.js

@@ -0,0 +1,7 @@
+import Vue from "vue"
+
+Vue.directive("focus", {
+  inserted: (el) => {
+    Vue.nextTick(() => el.focus())
+  },
+})