bak

src/components/DocumentSettings.vue

@@ -1,18 +1,12 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
-import {
-  PhClock,
-  PhFrameCorners,
-  PhMoon,
-  PhPalette,
-  PhSun,
-  PhX,
-} from '@phosphor-icons/vue'
+import { computed, ref } from 'vue'
+import { PhClock, PhFrameCorners, PhMoon, PhPalette, PhSun } from '@phosphor-icons/vue'
 import { useSceneStore } from '@/stores/scene'
 import { useTheme } from '@/composables/useTheme'
 import type { Theme } from '@/composables/useTheme'
+import { Modal } from '@/components/ui'
 
-const props = defineProps<{ modelValue: boolean }>()
+defineProps<{ modelValue: boolean }>()
 const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()
 
 const store = useSceneStore()
@@ -69,32 +63,20 @@ function close() {
   emit('update:modelValue', false)
 }
 
-function onKeyDown(e: KeyboardEvent) {
-  if (e.key === 'Escape' && props.modelValue) close()
-}
-
-onMounted(() => document.addEventListener('keydown', onKeyDown))
-onBeforeUnmount(() => document.removeEventListener('keydown', onKeyDown))
-
 function applyTheme(t: Theme) {
   setTheme(t)
 }
 </script>
 
 <template>
-  <Teleport to="body">
-    <Transition name="fade">
-      <div v-if="modelValue" class="backdrop" @mousedown.self="close">
-        <div class="dialog" role="dialog" aria-modal="true">
-          <header class="dialog-header">
-            <h2>Settings</h2>
-            <button class="close-btn" title="Schließen" @click="close">
-              <PhX :size="14" weight="bold" />
-            </button>
-          </header>
-
-          <div class="body">
-            <nav class="tabs">
+  <Modal
+    :model-value="modelValue"
+    title="Settings"
+    size="lg"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <div class="body">
+      <nav class="tabs">
               <button
                 v-for="tab in tabs"
                 :key="tab.id"
@@ -196,72 +178,15 @@ function applyTheme(t: Theme) {
                 </div>
                 <p class="hint">Gespeichert im Browser, beim nächsten Öffnen wiederverwendet.</p>
               </section>
-            </div>
-          </div>
-
-          <footer class="dialog-footer">
-            <button class="primary" @click="close">Fertig</button>
-          </footer>
-        </div>
       </div>
-    </Transition>
-  </Teleport>
+    </div>
+    <template #footer>
+      <button class="primary" @click="close">Fertig</button>
+    </template>
+  </Modal>
 </template>
 
 <style scoped>
-.backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.55);
-  z-index: 900;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  backdrop-filter: blur(2px);
-}
-
-.dialog {
-  width: min(620px, calc(100% - 32px));
-  background: var(--panel);
-  border: 1px solid var(--border-strong);
-  border-radius: 10px;
-  box-shadow: var(--shadow-md);
-  display: flex;
-  flex-direction: column;
-  max-height: calc(100vh - 64px);
-  overflow: hidden;
-}
-
-.dialog-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 16px;
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-}
-
-.dialog-header h2 {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.close-btn {
-  width: 26px;
-  height: 26px;
-  padding: 0;
-  justify-content: center;
-  background: transparent;
-  border: 1px solid transparent;
-  color: var(--text-dim);
-}
-
-.close-btn:hover:not(:disabled) {
-  background: var(--panel-alt);
-  color: var(--text);
-}
-
 .body {
   display: flex;
   min-height: 340px;
@@ -508,14 +433,6 @@ input[type='number'] {
   color: var(--accent);
 }
 
-.dialog-footer {
-  padding: 12px 16px;
-  display: flex;
-  justify-content: flex-end;
-  border-top: 1px solid var(--border);
-  flex-shrink: 0;
-}
-
 .primary {
   padding: 6px 14px;
   background: var(--accent-soft);
@@ -528,13 +445,4 @@ input[type='number'] {
 .primary:hover:not(:disabled) {
   background: var(--accent-soft-strong);
 }
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 140ms var(--ease);
-}
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
 </style>