add light mode

resources/js/Components/Common/Project/ProjectDropdown.vue

@@ -1,32 +1,33 @@
 <script setup lang="ts">
-import ProjectBadge from '@/packages/ui/src/Project/ProjectBadge.vue';
-import { computed, nextTick, ref, watch } from 'vue';
-import { useProjectsStore } from '@/utils/useProjects';
-import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
+import ProjectBadge from "@/packages/ui/src/Project/ProjectBadge.vue";
+import { computed, nextTick, ref, watch } from "vue";
+import { useProjectsStore } from "@/utils/useProjects";
+import Dropdown from "@/packages/ui/src/Input/Dropdown.vue";
 import {
     ComboboxAnchor,
     ComboboxContent,
     ComboboxInput,
     ComboboxItem,
     ComboboxRoot,
-    ComboboxViewport,
-} from 'radix-vue';
-import { PlusCircleIcon } from '@heroicons/vue/20/solid';
-import { storeToRefs } from 'pinia';
-import { api } from '@/packages/api/src';
-import { usePage } from '@inertiajs/vue3';
-import { getRandomColor } from '@/packages/ui/src/utils/color';
-import type { Project } from '@/packages/api/src';
-import ProjectDropdownItem from '@/packages/ui/src/Project/ProjectDropdownItem.vue';
+    ComboboxViewport
+} from "radix-vue";
+import { PlusCircleIcon } from "@heroicons/vue/20/solid";
+import { storeToRefs } from "pinia";
+import { api } from "@/packages/api/src";
+import { usePage } from "@inertiajs/vue3";
+import { getRandomColor } from "@/packages/ui/src/utils/color";
+import type { Project } from "@/packages/api/src";
+import ProjectDropdownItem from "@/packages/ui/src/Project/ProjectDropdownItem.vue";
+import { UseFocusTrap } from "@vueuse/integrations/useFocusTrap/component";
 
-const searchValue = ref('');
+const searchValue = ref("");
 const searchInput = ref<HTMLElement | null>(null);
 const model = defineModel<string | null>({
-    default: null,
+    default: null
 });
 const open = ref(false);
 const projectsStore = useProjectsStore();
-const emit = defineEmits(['update:modelValue', 'changed']);
+const emit = defineEmits(["update:modelValue", "changed"]);
 
 const { projects } = storeToRefs(projectsStore);
 const projectDropdownTrigger = ref<HTMLElement | null>(null);
@@ -34,7 +35,7 @@ const shownProjects = computed(() => {
     return projects.value.filter((project) => {
         return project.name
             .toLowerCase()
-            .includes(searchValue.value?.toLowerCase()?.trim() || '');
+            .includes(searchValue.value?.toLowerCase()?.trim() || "");
     });
 });
 
@@ -43,7 +44,7 @@ withDefaults(
         border?: boolean;
     }>(),
     {
-        border: true,
+        border: true
     }
 );
 
@@ -61,13 +62,13 @@ async function addProjectIfNoneExists() {
             {
                 name: searchValue.value,
                 color: getRandomColor(),
-                is_billable: false,
+                is_billable: false
             },
             { params: { organization: page.props.auth.user.current_team_id } }
         );
         projects.value.unshift(response.data);
         model.value = response.data.id;
-        searchValue.value = '';
+        searchValue.value = "";
         open.value = false;
     }
 }
@@ -94,16 +95,16 @@ function isProjectSelected(project: Project) {
 }
 
 const selectedProjectName = computed(() => {
-    return currentProject.value?.name || 'No Project';
+    return currentProject.value?.name || "No Project";
 });
 
 const selectedProjectColor = computed(() => {
-    return currentProject.value?.color || 'var(--theme-color-icon-default)';
+    return currentProject.value?.color || "var(--theme-color-icon-default)";
 });
 
 function updateValue(project: Project) {
     model.value = project.id;
-    emit('changed');
+    emit("changed");
 }
 </script>
 
@@ -113,76 +114,66 @@ function updateValue(project: Project) {
             <ProjectBadge
                 ref="projectDropdownTrigger"
                 :color="selectedProjectColor"
-                size="large"
+                size="xlarge"
                 :border
                 tag="button"
                 :name="selectedProjectName"
-                class="focus:border-input-border-active focus:outline-0 focus:bg-card-background-separator hover:bg-card-background-separator"></ProjectBadge>
+                class="focus:border-input-border-active bg-input-background focus:outline-0 focus:bg-card-background-separator hover:bg-card-background-separator"></ProjectBadge>
         </template>
 
         <template #content>
-            <ComboboxRoot
-                :open="open"
-                :model-value="currentProject"
-                :search-term="searchValue"
-                class="relative"
-                @update:model-value="updateValue"
-                @update:search-term="(e) => console.log(e)">
-                <ComboboxAnchor>
-                    <ComboboxInput
-                        ref="searchInput"
-                        class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
-                        placeholder="Search for a project..."
-                        @keydown.enter="addProjectIfNoneExists" />
-                </ComboboxAnchor>
-                <ComboboxContent>
-                    <ComboboxViewport
-                        ref="dropdownViewport"
-                        class="w-60 max-h-60 overflow-y-scroll">
-                        <ComboboxItem
-                            v-if="searchValue === ''"
-                            class="data-[highlighted]:bg-card-background-active"
-                            :data-project-id="null"
-                            :value="{
-                                id: null,
-                                name: 'No Project',
-                                color: 'var(--theme-color-icon-default)',
-                            }">
-                            <ProjectDropdownItem
-                                name="No Project"
-                                color="var(--theme-color-icon-default)"
-                                selected></ProjectDropdownItem>
-                        </ComboboxItem>
-                        <ComboboxItem
-                            v-for="project in shownProjects"
-                            :key="project.id"
-                            :value="project"
-                            class="data-[highlighted]:bg-card-background-active"
-                            :data-project-id="project.id">
-                            <ProjectDropdownItem
-                                :selected="isProjectSelected(project)"
-                                :color="project.color"
-                                :name="project.name"></ProjectDropdownItem>
-                        </ComboboxItem>
-                        <div
-                            v-if="
+            <UseFocusTrap
+                v-if="open"
+                :options="{ immediate: true, allowOutsideClick: true }">
+                <ComboboxRoot
+                    v-model:search-term="searchValue"
+                    :open="open"
+                    :model-value="currentProject"
+                    class="relative"
+                    @update:model-value="updateValue"
+                    >
+                    <ComboboxAnchor>
+                        <ComboboxInput
+                            ref="searchInput"
+                            class="bg-card-background border-0 placeholder-muted text-sm text-text-primary py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
+                            placeholder="Search for a project..."
+                            @keydown.enter="addProjectIfNoneExists" />
+                    </ComboboxAnchor>
+                    <ComboboxContent>
+                        <ComboboxViewport
+                            ref="dropdownViewport"
+                            class="w-60 max-h-60 overflow-y-scroll">
+                            <ComboboxItem
+                                v-for="project in shownProjects"
+                                :key="project.id"
+                                :value="project"
+                                class="data-[highlighted]:bg-card-background-active"
+                                :data-project-id="project.id">
+                                <ProjectDropdownItem
+                                    :selected="isProjectSelected(project)"
+                                    :color="project.color"
+                                    :name="project.name"></ProjectDropdownItem>
+                            </ComboboxItem>
+                            <div
+                                v-if="
                                 searchValue.length > 0 &&
                                 shownProjects.length === 0
                             "
-                            class="bg-card-background-active">
-                            <div
-                                class="flex space-x-3 items-center px-4 py-3 text-xs font-medium border-t rounded-b-lg border-card-background-separator">
-                                <PlusCircleIcon
-                                    class="w-5 flex-shrink-0"></PlusCircleIcon>
-                                <span
+                                class="bg-card-background-active">
+                                <div
+                                    class="flex space-x-3 items-center px-4 py-3 text-xs font-medium border-t rounded-b-lg border-card-background-separator">
+                                    <PlusCircleIcon
+                                        class="w-5 flex-shrink-0"></PlusCircleIcon>
+                                    <span
                                     >Add "{{ searchValue }}" as a new
                                     Project</span
-                                >
+                                    >
+                                </div>
                             </div>
-                        </div>
-                    </ComboboxViewport>
-                </ComboboxContent>
-            </ComboboxRoot>
+                        </ComboboxViewport>
+                    </ComboboxContent>
+                </ComboboxRoot>
+            </UseFocusTrap>
         </template>
     </Dropdown>
 </template>