bug fixes file deletions and more

2024-09-09 01:35:33 -05:00
parent 86ef860568
commit 70a9bcd904
14 changed files with 325 additions and 51 deletions
--- a/ui/components/Popup.vue
+++ b/ui/components/Popup.vue
@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+defineProps(['modelValue', 'header'])
+const emit = defineEmits(['update:modelValue'])
+</script>
+
+<template>
+    <div class="grid place-content-center absolute top-0 left-0 bottom-0 right-0 z-40"
+        :class="{ 'hidden': !modelValue }">
+        <div v-on:click=" $emit('update:modelValue', !modelValue)"
+            class="absolute top-0 left-0 bottom-0 right-0 bg-base/40">
+        </div>
+
+        <transition name="scale-fade">
+            <div v-if="modelValue"
+                class="bg-surface rounded-xl border shadow-md p-6 transition-[transform,opacity] duration-[250ms] origin-center z-50 w-screen h-screen sm:w-[600px] sm:h-auto">
+                <div class="flex justify-between mb-2 items-center">
+                    <h3 class="text-xl font-semibold">{{ header }}</h3>
+                    <button v-on:click=" $emit('update:modelValue', !modelValue)"
+                        class="p-1 border h-fit rounded-md hover:bg-muted/10 active:bg-muted/20 transition-bg">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+                            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                stroke-width="2" d="M18 6L6 18M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+                <slot />
+            </div>
+        </transition>
+    </div>
+</template>
+
+<style scoped>
+.scale-fade-enter-from,
+.scale-fade-leave-to {
+    opacity: 0;
+    transform: scale(0.90);
+}
+
+.scale-fade-enter-to {
+    opacity: 1;
+    transform: scale(1);
+}
+</style>