@simple-reporting/base 1.0.22 → 1.0.24

package/srl/.srl/components/Srl/Category/Accordion.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
-import { computed, ref, useId } from 'vue'
+import { computed, nextTick, onMounted, ref, useId } from 'vue'
+import { useRoute } from 'vue-router'
+import { isAccordionAnchored, setAccordionAnchored } from '#utils'
 
 const rootEl = ref<HTMLElement | null>(null)
 const id = ref(useId())
 const state = ref(false)
+const route = useRoute()
 function toggle() {
   state.value ?
-    close() :
-    open()
+      close() :
+      open()
 }
 
 function open() {
@@ -32,10 +35,35 @@ const accordion = computed(() => {
   }
 })
 
+onMounted(() => {
+  if (route.hash) {
+    if (rootEl.value.id && rootEl.value.id === route.hash) {
+      open()
+      isAccordionAnchored() || setAccordionAnchored(true)
+    } else {
+      const targetEl = rootEl.value?.querySelector<HTMLElement>(route.hash)
+      if (targetEl) {
+        open()
+        if (!isAccordionAnchored()) {
+          setAccordionAnchored(true)
+          nextTick(() => {
+            setTimeout(() => {
+              rootEl.value.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start',
+              })
+            }, 200)
+          })
+        }
+      }
+    }
+  }
+})
+
 </script>
 
 <template>
-  <div ref="rootEl">
+  <div ref="rootEl" tabindex="-1">
     <slot :accordion="accordion"/>
   </div>
 </template>

package/srl/.srl/components/Srl/Page/Dialog.vue

@@ -1,25 +1,23 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue'
 import SrlPageCustomDialog from '@/Dialog.vue';
 import Autoload from '@/Autoload.ts';
 
 const props = withDefaults(
-  defineProps<{
-    header?: string;
-    content?: string;
-  }>(),
-  {
-    header: '',
-    content: '',
-  },
+    defineProps<{
+      header?: string;
+      content?: string;
+    }>(),
+    {
+      header: '',
+      content: '',
+    },
 );
 
 const $el = ref<HTMLDialogElement | null>(null);
-const dialogState = ref<boolean>(false);
-
 const header = ref<string>(props.header);
 const content = ref<string>(props.content);
-
+const dialogState = ref<boolean>(false);
 function setDialogContent(template: string) {
   content.value = template;
 }
@@ -30,15 +28,15 @@ function setDialogContentAndOpen(template: string) {
 }
 
 function open() {
-  $el.value?.showModal();
   dialogState.value = true;
+  $el.value?.showModal();
   $el.value?.querySelector('.srl-dialog__main')?.focus();
   Autoload.init($el.value);
 }
 
 function close() {
-  $el.value?.close();
   dialogState.value = false;
+  $el.value?.close();
 }
 
 function clearContent() {
@@ -58,11 +56,11 @@ defineExpose({
 
 <template>
   <dialog
-    ref="$el"
-    id="srl-page__dialog"
-    class="srl-page__dialog"
-    aria-modal="true"
-    @click.stop="close"
+      ref="$el"
+      id="srl-page__dialog"
+      class="srl-page__dialog"
+      aria-modal="true"
+      @click.stop="close"
   >
     <SrlAriaTabChain @click.stop>
       <SrlPageCustomDialog :header="header" :content="content" @close="close" />

package/srl/.srl/plugins/initProject.ts

@@ -2,6 +2,7 @@ import { setConfig } from '#composables/config';
 import { createApp } from 'vue';
 import { initI18n } from '@/i18n';
 import srlVuePlugin from '#plugins/vueSrlPlugin';
+import { clearPageState } from '#utils'
 
 import '#imports/app.scss';
 
@@ -9,11 +10,15 @@ import SrlPageApp from '../App.vue';
 import router from '@/router';
 
 export default async function initProject() {
-  await setConfig();
-  const i18n = initI18n();
-  const app = (window.app = createApp(SrlPageApp));
-  app.use(i18n);
-  app.use(router);
-  app.use(srlVuePlugin);
-  return app;
+    router.beforeEach((to, from, next) => {
+        clearPageState();
+        next();
+    });
+    await setConfig();
+    const i18n = initI18n();
+    const app = (window.app = createApp(SrlPageApp));
+    app.use(i18n);
+    app.use(router);
+    app.use(srlVuePlugin);
+    return app;
 }

package/srl/.srl/utils/html.ts

@@ -3,83 +3,92 @@ import { useArticles, useLocale, addCssStyles } from '#composables';
 
 type AttrObj = { [key: string]: string | null };
 function attributesToString(attributes: Record<string, string | null>): string {
-  return Object.entries(attributes)
-    .map(([key, value]) => (value !== null ? `${key}="${value}"` : key))
-    .join(' ');
+    return Object.entries(attributes)
+        .map(([key, value]) => (value !== null ? `${key}="${value}"` : key))
+        .join(' ');
 }
 
 export function prepareHtmlContent(text: string): string {
-  const articles = useArticles();
-  const locale = useLocale();
+    const articles = useArticles();
+    const locale = useLocale();
 
-  const regex = /<a\s+([^>]+)>(.*?)<\/a>/gis;
-  text = text.replace(regex, (match, attrString, innerText) => {
+    const regex = /<a\s+([^>]+)>(.*?)<\/a>/gis;
+    text = text.replace(regex, (match, attrString, innerText) => {
 
-    const attrObj: AttrObj = {};
-    attrString.replace(/([a-zA-Z0-9\-_]+)(?:="([^"]*)")?/g, (m, key: string, value: string | null) => {
-      attrObj[key] = value || null;
-      return m;
-    });
+        const attrObj: AttrObj = {};
+        attrString.replace(/([a-zA-Z0-9\-_]+)(?:="([^"]*)")?/g, (m, key: string, value: string | null) => {
+            attrObj[key] = value || null;
+            return m;
+        });
 
-    if (
-      attrObj['data-note-target'] &&
-      attrObj['data-note-target'] === 'popup'
-    ) {
-      attrObj.uuid = attrObj.href;
-      delete attrObj.href;
-      const attrs = attributesToString(attrObj);
-      return `<srl-article-dialog-button ${attrs}>${innerText}</srl-article-dialog-button>`;
-    }
+        if (
+            attrObj['data-note-target'] &&
+            attrObj['data-note-target'] === 'popup'
+        ) {
+            attrObj.uuid = attrObj.href;
+            delete attrObj.href;
+            if (attrObj['data-article-name']) {
+                attrObj.uuid = attrObj['data-article-name'];
+                delete attrObj['data-article-name'];
+            }
+            const arrUuid = attrObj.uuid.split('#');
+            attrObj.uuid = arrUuid[0];
+            if (arrUuid[1]) {
+                attrObj.anchor = arrUuid[1];
+            }
+            const attrs = attributesToString(attrObj);
+            return `<srl-article-dialog-button ${attrs}>${innerText}</srl-article-dialog-button>`;
+        }
 
-    if (attrObj.href) {
-      const arrLink = attrObj.href.split('#');
+        if (attrObj.href) {
+            const arrLink = attrObj.href.split('#');
 
-      if (isRouterPath(arrLink[0])) {
-        delete attrObj.href;
-        if (arrLink[0].startsWith('./')) {
-          arrLink[0] = arrLink[0].substring(1);
-        }
-        if (arrLink[0] === `/${locale.value}/home`) {
-          arrLink[0] = `/${locale.value}`;
-        }
-        attrObj.to = arrLink[0];
-        if (arrLink[1]) {
-          attrObj.to += `#${arrLink[1]}`;
-        }
-        const attrs = attributesToString(attrObj);
-        return `<router-link ${attrs}>${innerText}</router-link>`;
-      }
+            if (isRouterPath(arrLink[0])) {
+                delete attrObj.href;
+                if (arrLink[0].startsWith('./')) {
+                    arrLink[0] = arrLink[0].substring(1);
+                }
+                if (arrLink[0] === `/${locale.value}/home`) {
+                    arrLink[0] = `/${locale.value}`;
+                }
+                attrObj.to = arrLink[0];
+                if (arrLink[1]) {
+                    attrObj.to += `#${arrLink[1]}`;
+                }
+                const attrs = attributesToString(attrObj);
+                return `<router-link ${attrs}>${innerText}</router-link>`;
+            }
 
-      const a = articles.value.find((i) => i.uuid === arrLink[0]);
-      if (a) {
-        delete attrObj.href;
-        attrObj.to = a.index
-          ? `/${locale.value}`
-          : `/${locale.value}/${a.slug}`;
-        if (arrLink[1]) {
-          attrObj.to += `#${arrLink[1]}`;
+            const a = articles.value.find((i) => i.uuid === arrLink[0]);
+            if (a) {
+                delete attrObj.href;
+                attrObj.to = a.index
+                    ? `/${locale.value}`
+                    : `/${locale.value}/${a.slug}`;
+                if (arrLink[1]) {
+                    attrObj.to += `#${arrLink[1]}`;
+                }
+                const attrs = attributesToString(attrObj);
+                return `<router-link ${attrs}>${innerText}</router-link>`;
+            }
         }
-        const attrs = attributesToString(attrObj);
-        return `<router-link ${attrs}>${innerText}</router-link>`;
-      }
-    }
 
-    return match;
-  });
+        return match;
+    });
 
-  text = text.replace(
-    /<template-([a-z]+)>([\s\S]*?)<\/template-\1>/g,
-    (_match, name, content) => `<template #${name}>${content}</template>`
-  );
+    text = text.replace(
+        /<template-([a-z]+)>([\s\S]*?)<\/template-\1>/g,
+        (_match, name, content) => `<template #${name}>${content}</template>`
+    );
 
-  text = text.replace(/<style[^>]*>([\s\S]*?)<\/style>/gi, (match, p1) => {
-    addCssStyles(p1);
-    return '';
-  });
+    text = text.replace(/<style[^>]*>([\s\S]*?)<\/style>/gi, (match, p1) => {
+        addCssStyles(p1);
+        return '';
+    });
 
-  return text;
+    return text;
 }
 
 export default {
-  prepareHtmlContent,
+    prepareHtmlContent,
 };

package/srl/.srl/utils/index.ts

@@ -1,5 +1,32 @@
 import { isRouterPath, isExternalPath } from './uri';
 import { camelCase } from './camelCase';
 import { prepareHtmlContent } from './html';
+import {
+    usePageState,
+    clearPageState,
+    isDialogStored,
+    addDialogToStorage,
+    getDialogFromStorage,
+    getDialogStorage,
+    isAccordionAnchored,
+    setAccordionAnchored,
+    isMounted,
+    setMounted
+} from './pageState.ts';
 
-export { isRouterPath, isExternalPath, camelCase, prepareHtmlContent };
+export {
+    isRouterPath,
+    isExternalPath,
+    camelCase,
+    prepareHtmlContent,
+    usePageState,
+    clearPageState,
+    isAccordionAnchored,
+    setAccordionAnchored,
+    isDialogStored,
+    addDialogToStorage,
+    getDialogFromStorage,
+    getDialogStorage,
+    setMounted,
+    isMounted,
+};

package/srl/.srl/utils/pageState.ts

@@ -0,0 +1,61 @@
+import { type Ref } from 'vue'
+
+type DialogStorage = {
+    [key: string]: Ref<SrlPageDialog>;
+}
+
+type PageState = {
+    isMounted: boolean;
+    dialogStorage: DialogStorage;
+    accordionAnchored: boolean;
+}
+
+const pageState: PageState = {
+    isMounted: false,
+    dialogStorage: {},
+    accordionAnchored: false,
+}
+
+export function usePageState() {
+    return pageState;
+}
+
+export function setMounted(value: boolean): void {
+    pageState.isMounted = value;
+}
+
+export function isMounted(): boolean {
+    return pageState.isMounted;
+}
+
+export function clearPageState() {
+    pageState.isMounted = false;
+    pageState.dialogStorage = {};
+    pageState.accordionAnchored = false;
+}
+
+export function isDialogStored(uuid: string): boolean {
+    return uuid in pageState.dialogStorage
+}
+
+export function addDialogToStorage(uuid: string, refSrlPageDialog: Ref<SrlPageDialog>): void {
+    pageState.dialogStorage[uuid] = refSrlPageDialog
+}
+
+export function getDialogFromStorage(uuid: string): Ref<SrlPageDialog> | null {
+    return isDialogStored(uuid)?
+        pageState.dialogStorage[uuid] : null
+}
+
+export function getDialogStorage() : DialogStorage {
+    return pageState.dialogStorage
+}
+
+export function setAccordionAnchored(value: boolean): void {
+    pageState.accordionAnchored = value;
+}
+
+export function isAccordionAnchored(): boolean {
+    return pageState.accordionAnchored;
+}
+

package/srl/srl/pdf/PDFNotes.ts

@@ -0,0 +1,71 @@
+export interface PDFNotesConfig {
+  noteClass: string; // kann mehrere Selektoren per Komma enthalten
+}
+
+export default class PDFNotes {
+  private notesArticles: NodeListOf<HTMLElement>;
+  private selectors: string[];
+  private excludedClasses = ['srl-grid', 'srl-linkable'];
+
+  constructor(config: PDFNotesConfig) {
+    const { noteClass } = config;
+
+    if (!noteClass) {
+      console.warn("PDFNotes: 'noteClass' ist erforderlich.");
+      return;
+    }
+
+    // Selektoren sauber splitten
+    this.selectors = noteClass.split(',').map(s => s.trim()).filter(Boolean);
+
+    // Gesamtliste nur wenn du sie sonst brauchst
+    this.notesArticles = document.querySelectorAll(noteClass);
+
+    if (this.notesArticles.length === 0) {
+      console.warn(`PDFNotes: Keine Elemente gefunden mit Selektor '${noteClass}'.`);
+      return;
+    }
+
+    this.markLastNotePerSelector();
+    this.setFirstAndLastNoteClass();
+  }
+
+  private setFirstAndLastNoteClass(): void {
+    this.notesArticles.forEach(container => {
+      const children = Array.from(container.children) as HTMLElement[];
+      if (children.length === 0) return;
+
+      const firstChild = children[0];
+      const lastChild = children[children.length - 1];
+
+      const getRelevantClass = (el: HTMLElement): string | null => {
+        const classes = Array.from(el.classList);
+        const relevant = classes.find(cls => !this.excludedClasses.includes(cls));
+        return relevant || null;
+      };
+
+      const firstClass = getRelevantClass(firstChild);
+      const lastClass = getRelevantClass(lastChild);
+
+      if (firstClass) container.classList.add(`${firstClass}-first`);
+      if (lastClass && lastClass !== firstClass) container.classList.add(`${lastClass}-last`);
+    });
+  }
+
+  // Neu: letzte Note je Selektor markieren
+  private markLastNotePerSelector(): void {
+    if (!this.selectors || this.selectors.length === 0) return;
+
+    this.selectors.forEach(sel => {
+      const nodes = document.querySelectorAll<HTMLElement>(sel);
+      if (nodes.length === 0) return;
+
+      const last = nodes[nodes.length - 1];
+      last.classList.add('last-note');
+
+      // Falls du unterschiedliche Klassen pro Typ willst, entkommentieren:
+      // const typeKey = sel.replace(/^[.#]/, '').replace(/[^a-zA-Z0-9_]/g, '_');
+      // last.classList.add(`last-note-${typeKey}`);
+    });
+  }
+}

package/srl/srl/pdf/PDFSetPageNumbers.ts

@@ -0,0 +1,25 @@
+export interface PDFSetPageNumbersConfig {
+  tocItemClass: string;
+  tocItemPageNumberClass: string;
+}
+
+export default class PDFSetPageNumbers {
+  private tocItems: NodeListOf<HTMLElement>;
+  private pageNumberClass: string;
+
+  constructor(config: PDFSetPageNumbersConfig) {
+    const { tocItemClass, tocItemPageNumberClass } = config;
+
+    this.tocItems = document.querySelectorAll(tocItemClass);
+    this.pageNumberClass = tocItemPageNumberClass;
+
+    this.tocItems.forEach(item => {
+      const link = item.getAttribute('href');
+      const num = item.querySelector<HTMLElement>(this.pageNumberClass);
+
+      if (num && link) {
+        num.setAttribute('data-page-number', link);
+      }
+    });
+  }
+}

package/srl/srl/pdf.scss

@@ -1,2 +0,0 @@
-@use 'config';
-@forward '@simple-reporting/base/scss/pdf';