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

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