From c4daca32c5f23cfe4f2111b1ec1ced0fcbe53c01 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Mon, 9 Dec 2024 15:45:28 +0100
Subject: [PATCH] add modal focus trap & fix design bug in project billable
 section

---
 resources/js/packages/ui/src/Modal.vue        | 22 ++++++++++++++++++-
 .../Project/ProjectEditBillableSection.vue    |  2 +-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/resources/js/packages/ui/src/Modal.vue b/resources/js/packages/ui/src/Modal.vue
index 4f275b9d..5c4b1f60 100644
--- a/resources/js/packages/ui/src/Modal.vue
+++ b/resources/js/packages/ui/src/Modal.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, watch } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, watch } from 'vue';
 import { useId } from 'radix-vue';
 import { isLastLayer, layers } from '@/packages/ui/src/utils/dismissableLayer';
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap';
+import { ref } from 'vue';
 
 const props = defineProps({
     show: {
@@ -74,6 +76,23 @@ const maxWidthClass = computed(() => {
         '2xl': 'sm:max-w-2xl',
     }[props.maxWidth];
 });
+
+const target = ref();
+const { activate, deactivate } = useFocusTrap(target);
+watch(
+    () => props.show,
+    (value) => {
+        if (value) {
+            nextTick(() => {
+                activate();
+            });
+        } else {
+            nextTick(() => {
+                deactivate();
+            });
+        }
+    }
+);
 </script>
 
 <template>
@@ -109,6 +128,7 @@ const maxWidthClass = computed(() => {
                     <div
                         v-show="show"
                         role="dialog"
+                        ref="target"
                         class="mb-6 bg-default-background border border-card-border rounded-lg shadow-xl transform transition-all sm:w-full sm:mx-auto"
                         :class="maxWidthClass">
                         <slot v-if="show" />
diff --git a/resources/js/packages/ui/src/Project/ProjectEditBillableSection.vue b/resources/js/packages/ui/src/Project/ProjectEditBillableSection.vue
index 60c98903..a58ed5fd 100644
--- a/resources/js/packages/ui/src/Project/ProjectEditBillableSection.vue
+++ b/resources/js/packages/ui/src/Project/ProjectEditBillableSection.vue
@@ -57,7 +57,7 @@ const emit = defineEmits(['submit']);
 <template>
     <div class="sm:flex items-center space-y-2 sm:space-y-0 sm:space-x-4 pt-6">
         <div>
-            <div class="flex items-center space-x-1">
+            <div class="flex items-center space-x-1 mb-2">
                 <BillableIcon
                     class="text-text-quaternary h-4 ml-1 mr-0.5"></BillableIcon>
                 <InputLabel for="billable" value="Billable Default" />