From: Adam Dullage <redacted>
Date: Wed, 8 May 2024 16:29:46 +0000 (+0100)
Subject: Add custom v-focus directive and add escape keybinding to close modal
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=6826be42a0457244375f1383d8c46044a2b56166;p=flatnotes.git

Add custom v-focus directive and add escape keybinding to close modal
---

diff --git a/client/App.vue b/client/App.vue
index 9c1300a..3f16247 100644
--- a/client/App.vue
+++ b/client/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container mx-auto flex h-screen flex-col px-2 py-4">
     <PrimeToast />
-    <SearchModal ref="searchModal" />
+    <SearchModal v-model="isSearchModalVisible" />
     <NavBar
       v-if="showNavBar"
       ref="navBar"
@@ -18,7 +18,7 @@ import { useToast } from "primevue/usetoast";
 import { computed, ref } from "vue";
 import { RouterView, useRoute } from "vue-router";
 
-import { getConfig, apiErrorHandler } from "./api.js";
+import { apiErrorHandler, getConfig } from "./api.js";
 import PrimeToast from "./components/PrimeToast.vue";
 import { useGlobalStore } from "./globalStore.js";
 import { loadTheme } from "./helpers.js";
@@ -27,9 +27,9 @@ import SearchModal from "./partials/SearchModal.vue";
 import { loadStoredToken } from "./tokenStorage.js";
 
 const globalStore = useGlobalStore();
+const isSearchModalVisible = ref(false);
 const navBar = ref();
 const route = useRoute();
-const searchModal = ref();
 const toast = useToast();
 
 // '/' to search
@@ -59,7 +59,7 @@ const showNavBarLogo = computed(() => {
 });
 
 function toggleSearchModal() {
-  searchModal.value.toggle();
+  isSearchModalVisible.value = !isSearchModalVisible.value;
 }
 
 loadTheme();
diff --git a/client/components/ConfirmModal.vue b/client/components/ConfirmModal.vue
index 4036bcd..60adcfa 100644
--- a/client/components/ConfirmModal.vue
+++ b/client/components/ConfirmModal.vue
@@ -1,6 +1,6 @@
 <template>
   <Modal
-    ref="modal"
+    v-model="isVisible"
     :title="title"
     :class="{ 'border border-l-4 border-l-theme-danger': isDanger }"
     :closeHandler="cancelHandler"
@@ -10,14 +10,17 @@
     <!-- Buttons -->
     <div class="flex justify-end">
       <CustomButton label="Cancel" @click="cancelHandler" class="mr-2" />
-      <CustomButton :label="confirmButtonText" @click="confirmHandler" danger />
+      <CustomButton
+        v-focus
+        :label="confirmButtonText"
+        @click="confirmHandler"
+        danger
+      />
     </div>
   </Modal>
 </template>
 
 <script setup>
-import { ref } from "vue";
-
 import CustomButton from "./CustomButton.vue";
 import Modal from "./Modal.vue";
 
@@ -28,22 +31,15 @@ const props = defineProps({
   isDanger: Boolean,
 });
 const emit = defineEmits(["confirm", "cancel"]);
-
-const modal = ref();
-
-function toggle() {
-  modal.value.toggle();
-}
+const isVisible = defineModel({ type: Boolean });
 
 function cancelHandler() {
-  modal.value.setVisibility(false);
+  isVisible.value = false;
   emit("cancel");
 }
 
 function confirmHandler() {
-  modal.value.setVisibility(false);
+  isVisible.value = false;
   emit("confirm");
 }
-
-defineExpose({ toggle });
 </script>
diff --git a/client/components/Modal.vue b/client/components/Modal.vue
index 4b5b2bc..9274f9a 100644
--- a/client/components/Modal.vue
+++ b/client/components/Modal.vue
@@ -8,11 +8,12 @@
     <div
       class="relative max-w-[500px] grow rounded-lg border border-theme-border bg-theme-background px-6 py-4 shadow-lg"
       :class="$attrs.class"
+      @keyup.esc="close"
     >
       <CustomButton
         v-if="props.showClose"
         :iconPath="mdiWindowClose"
-        @click="close"
+        @click="closeHandler"
         class="absolute right-1 top-1"
       />
       <!-- Title -->
@@ -24,38 +25,24 @@
 
 <script setup>
 import { mdiWindowClose } from "@mdi/js";
-import { ref } from "vue";
 
 import CustomButton from "./CustomButton.vue";
 
 defineOptions({
   inheritAttrs: false,
 });
-
 const props = defineProps({
   title: { type: String, default: "Confirm" },
   showClose: { type: Boolean },
-  closeHandler: Function,
-  modalClasses: String,
+  closeHandlerOverride: Function,
 });
+const isVisible = defineModel({ type: Boolean });
 
-const isVisible = ref(false);
-
-function toggle() {
-  isVisible.value = !isVisible.value;
-}
-
-function setVisibility(value) {
-  isVisible.value = value;
-}
-
-function close() {
-  if (props.closeHandler) {
-    props.closeHandler();
+function closeHandler() {
+  if (props.closeHandlerOverride) {
+    props.closeHandlerOverride();
   } else {
-    setVisibility(false);
+    isVisible.value = false;
   }
 }
-
-defineExpose({ toggle, setVisibility });
 </script>
diff --git a/client/index.js b/client/index.js
index fbea270..e2672d5 100644
--- a/client/index.js
+++ b/client/index.js
@@ -12,4 +12,12 @@ app.use(router);
 app.use(pinia);
 app.use(PrimeVue, { unstyled: true });
 app.use(ToastService);
+
+// Custom v-focus directive to focus on an element when mounted
+app.directive("focus", {
+  mounted(el) {
+    el.focus();
+  },
+});
+
 app.mount("#app");
diff --git a/client/partials/SearchInput.vue b/client/partials/SearchInput.vue
index c374c10..af7947b 100644
--- a/client/partials/SearchInput.vue
+++ b/client/partials/SearchInput.vue
@@ -2,9 +2,9 @@
   <form class="flex w-full" @submit.prevent="search">
     <TextInput
       v-model="searchTerm"
+      v-focus
       :placeholder="props.hidePlaceholder ? '' : 'Search'"
       class="rounded-r-none"
-      ref="textInput"
     />
     <CustomButton
       :iconPath="mdilMagnify"
@@ -17,7 +17,7 @@
 <script setup>
 import { mdilMagnify } from "@mdi/light-js";
 import { useToast } from "primevue/usetoast";
-import { onMounted, ref } from "vue";
+import { ref } from "vue";
 import { useRouter } from "vue-router";
 import * as constants from "../constants";
 
@@ -32,7 +32,6 @@ const props = defineProps({
 const emit = defineEmits(["search"]);
 
 const router = useRouter();
-const textInput = ref();
 const searchTerm = ref(props.initialSearchTerm);
 const toast = useToast();
 
@@ -47,8 +46,4 @@ function search() {
     toast.add(getToastOptions("Error", "Please enter a search term.", true));
   }
 }
-
-onMounted(() => {
-  textInput.value.focus();
-});
 </script>
diff --git a/client/partials/SearchModal.vue b/client/partials/SearchModal.vue
index 353cf90..20374fa 100644
--- a/client/partials/SearchModal.vue
+++ b/client/partials/SearchModal.vue
@@ -1,24 +1,20 @@
 <template>
-  <Modal ref="modal" title="Search">
+  <Modal v-model="isVisible" title="Search">
     <SearchInput @search="toggle" class="mb-4" hidePlaceholder />
     <div class="flex justify-end">
-      <CustomButton label="Close" @click="toggle" />
+      <CustomButton label="Close" @click="toggleHandler" />
     </div>
   </Modal>
 </template>
 
 <script setup>
-import { ref } from "vue";
-
 import CustomButton from "../components/CustomButton.vue";
 import Modal from "../components/Modal.vue";
 import SearchInput from "./SearchInput.vue";
 
-const modal = ref();
+const isVisible = defineModel({ type: Boolean });
 
-function toggle() {
-  modal.value.toggle();
+function toggleHandler() {
+  isVisible.value = !isVisible.value;
 }
-
-defineExpose({ toggle });
 </script>
diff --git a/client/views/Note.vue b/client/views/Note.vue
index c3ccb75..aa5f5f9 100644
--- a/client/views/Note.vue
+++ b/client/views/Note.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- Confirm Deletion Modal -->
   <ConfirmModal
-    ref="deleteConfirmModal"
+    v-model="isDeleteModalVisible"
     title="Confirm Deletion"
     :message="`Are you sure you want to delete the note '${note.title}'?`"
     confirmButtonText="Delete"
@@ -99,7 +99,7 @@ const props = defineProps({
 });
 
 const editMode = ref(false);
-const deleteConfirmModal = ref();
+const isDeleteModalVisible = ref(false);
 const isNewNote = computed(() => !props.title);
 const loadingIndicator = ref();
 const note = ref({});
@@ -150,7 +150,7 @@ function editHandler() {
 }
 
 function deleteHandler() {
-  deleteConfirmModal.value.toggle();
+  isDeleteModalVisible.value = true;
 }
 
 function deleteConfirmedHandler() {