This commit is contained in:
Dennis Postma 2025-04-05 22:43:51 +02:00
parent 2bbe6b0ff0
commit d83c207062

View File

@ -11,7 +11,7 @@
class="bg-white rounded-2xl border-2 border-gray-300 shadow-xl max-w-4xl w-full max-h-[90vh] flex flex-col" class="bg-white rounded-2xl border-2 border-gray-300 shadow-xl max-w-4xl w-full max-h-[90vh] flex flex-col"
> >
<!-- Header - Make it the drag handle --> <!-- Header - Make it the drag handle -->
<div class="flex justify-between items-center p-6 border-b border-gray-100 cursor-move" @mousedown="startDrag" @touchstart="startDrag"> <div class="flex justify-between items-center p-4 border-b border-gray-100 cursor-move" @mousedown="startDrag" @touchstart="startDrag">
<h3 class="text-2xl font-semibold text-gray-900">{{ title }}</h3> <h3 class="text-2xl font-semibold text-gray-900">{{ title }}</h3>
<button @click="close" class="p-2 hover:bg-gray-100 rounded-lg transition-colors"> <button @click="close" class="p-2 hover:bg-gray-100 rounded-lg transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@ -30,7 +30,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue'; import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
const props = defineProps<{ const props = defineProps<{
isOpen: boolean; isOpen: boolean;
@ -135,7 +135,7 @@
newValue => { newValue => {
if (newValue) { if (newValue) {
// Use nextTick to ensure the modal is mounted // Use nextTick to ensure the modal is mounted
Vue.nextTick(() => { nextTick(() => {
centerModal(); centerModal();
}); });
} }