@afeefa/vue-app 0.0.308 → 0.0.309

package/.afeefa/package/release/version.txt

@@ -1 +1 @@
-0.0.308
+0.0.309

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.308",
+  "version": "0.0.309",
   "description": "",
   "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
   "license": "MIT",

package/src-admin/components/StickyHeader.vue

@@ -18,6 +18,8 @@
       <app-bar-title-container class="appBarTitle flex-grow-1" />
       <app-bar-buttons class="appBarButtons mr-2" />
     </div>
+
+    <app-bar-navigation v-if="$config.hasAppBarNavigation" />
   </div>
 </template>
 
@@ -25,13 +27,15 @@
 import { Component, Vue } from '@a-vue'
 import AppBarButtons from './app/AppBarButtons'
 import AppBarTitleContainer from './app/AppBarTitleContainer'
+import AppBarNavigation from './app/AppBarNavigation'
 import { SidebarEvent } from '@a-admin/events'
 import { sidebarService } from './sidebar/SidebarService'
 
 @Component({
   components: {
     AppBarButtons,
-    AppBarTitleContainer
+    AppBarTitleContainer,
+    AppBarNavigation
   }
 })
 export default class StickyHeader extends Vue {

package/src-admin/components/app/AppBarNavigation.vue

@@ -0,0 +1,108 @@
+<template>
+  <div
+    id="appBarNavigation"
+    class="d-flex align-center gap-1"
+  >
+    <v-btn
+      v-for="link in links"
+      :key="link.id"
+      class="mt-3 mb-n1"
+      x-small
+      @click="scrollToSection(link.id)"
+    >
+      {{ link.label }}
+    </v-btn>
+  </div>
+</template>
+
+<script>
+import { Component, Vue } from '@a-vue'
+import { debounce } from '@a-vue/utils/debounce'
+
+@Component
+export default class AppBarNavigation extends Vue {
+  links = []
+
+  debounceInitLinks = debounce(this.initLinks, 50) // fire immediately if !value (click clearable-x)
+
+  mounted () {
+    const mutationWatcher = new MutationObserver(mutations => {
+      let changed = false
+
+      for (const m of mutations) {
+        // Neue Nodes
+        for (const node of m.addedNodes) {
+          if (!(node instanceof HTMLElement)) continue
+          if (node.matches('.collapsible-section') || node.querySelector('.collapsible-section')) {
+            changed = true
+          }
+        }
+
+        // Entfernte Nodes
+        for (const node of m.removedNodes) {
+          if (!(node instanceof HTMLElement)) continue
+          if (node.matches('.collapsible-section') || node.querySelector('.collapsible-section')) {
+            changed = true
+          }
+        }
+      }
+
+      if (changed) {
+        this.debounceInitLinks()
+      }
+    })
+
+    mutationWatcher.observe(document.body, { childList: true, subtree: true })
+  }
+
+  initLinks () {
+    const sections = document.querySelectorAll('.collapsible-section')
+    console.log(Array.from(sections).map(s => s.getAttribute('label')))
+    this.links = Array.from(sections).map(s => {
+      const label = s.getAttribute('label')
+      const slug = label
+        .toLowerCase()
+        .replace(/[^\w]+/g, '-') // Sonderzeichen -> Bindestriche
+        .replace(/^-+|-+$/g, '') // führende/trailing -
+        .substring(0, 50) // Sicherheitslimit
+
+      s.id = slug
+
+      return {
+        id: s.id,
+        label,
+        slug
+      }
+    })
+  }
+
+  scrollToSection (id) {
+    const el = document.querySelector(`#${id}`)
+    if (!el) return
+
+    // Scroll-Container auswählen (kann auch this.$refs.scrollContainer sein)
+    const container = document.querySelector('#v-main')
+    if (!container) return
+
+    // Abstand in Pixeln (4rem ≈ 64px)
+    const offset = 140
+
+    // Berechne die Scroll-Position relativ zum Container
+    const containerTop = container.getBoundingClientRect().top
+    const elementTop = el.getBoundingClientRect().top
+
+    const scrollTarget = container.scrollTop + (elementTop - containerTop) - offset
+
+    container.scrollTo({
+      top: scrollTarget,
+      behavior: 'smooth'
+    })
+
+    // // Scroll sanft zur Section
+    // el.scrollIntoView({
+    //   behavior: 'smooth',
+    //   block: 'start'
+    // })
+  }
+}
+</script>

package/src-admin/components/app/AppBarTitle.vue

@@ -16,7 +16,7 @@
 
     <v-icon
       :color="icon.color"
-      size="3.5rem"
+      size="2.2rem"
       v-text="icon.icon"
     />
 

package/src-admin/components/detail/EditableDetailProperty.vue

@@ -6,8 +6,8 @@
     <template #actionButton>
       <a-icon
         v-if="buttonEdit"
-        size="1.3rem"
-        class="contextButton mt-n1"
+        size="1.6rem"
+        class="contextButton"
         title="Bearbeiten"
         @click="openModal"
       >
@@ -16,8 +16,8 @@
 
       <a-icon
         v-if="buttonAdd"
-        size="1.3rem"
-        class="contextButton mt-n1"
+        size="1.6rem"
+        class="contextButton"
         title="Bearbeiten"
         @click="openModal"
       >

package/src-admin/config/AdminConfig.js

@@ -24,7 +24,8 @@ class AdminConfig {
   }
 
   config = {
-    has2FA: false
+    has2FA: false,
+    hasAppBarNavigation: false
   }
 }