adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-14 03:02:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor timetracker to seperate data and ui logic

Browse Source
This commit is contained in:
Gregor Vostrak
2024-07-22 17:56:51 +02:00
parent a9c874e540
commit 06fef6e40f
41 changed files with 1984 additions and 961 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
resources/js/Components/Dropdown.vue
View File

@@ -1,6 +1,11 @@
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import { flip, type Placement, useFloating } from '@floating-ui/vue';
import {
flip,
type Placement,
type ReferenceElement,
useFloating,
} from '@floating-ui/vue';
import { offset } from '@floating-ui/vue';
import { autoUpdate } from '@floating-ui/vue';
@@ -49,7 +54,7 @@ function onBackgroundClick() {
open.value = false;
}
const reference = ref(null);
const reference = ref<null | ReferenceElement>(null);
const floating = ref(null);
const { floatingStyles } = useFloating(reference, floating, {
placement: props.align,
@@ -59,37 +64,36 @@ const { floatingStyles } = useFloating(reference, floating, {
</script>
<template>
<div>
<div @click.prevent="toggleOpen" ref="reference">
<div class="min-w-0">
<div @click.prevent="toggleOpen" ref="reference" class="min-w-0">
<slot name="trigger" />
</div>
<!-- Full Screen Dropdown Overlay -->
<div
v-show="open"
class="fixed inset-0 z-40"
@click.prevent="onBackgroundClick" />
<Teleport to="body">
<div
v-show="open"
ref="floating"
class="z-50"
:style="floatingStyles"
@click="onContentClick">
<transition
enter-active-class="transition ease-out duration-200"
enter-from-class="transform opacity-0 scale-95"
enter-to-class="transform opacity-100 scale-100"
leave-active-class="transition ease-in duration-75"
leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95">
class="fixed inset-0 z-40"
@click.prevent="onBackgroundClick" />
<transition
enter-active-class="transition-opacity ease-out duration-200"
enter-from-class="transform opacity-0 scale-95"
enter-to-class="transform opacity-100 scale-100"
leave-active-class="transition-opacity ease-in duration-75"
leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95">
<div
v-if="open"
class="z-50"
ref="floating"
:style="floatingStyles"
@click="onContentClick">
<div
v-if="open"
class="rounded-lg ring-1 relative ring-black ring-opacity-5 border border-card-border overflow-none shadow-dropdown bg-card-background">
<slot name="content" />
</div>
</transition>
</div>
</div>
</transition>
</Teleport>
</div>
</template>