@simple-reporting/base 1.0.38 → 1.0.40

package/livingdocs/130.Hosting_Components/020.search/searchHighlightOnTarget.vue

@@ -0,0 +1,246 @@
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, onMounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+const props = withDefaults(defineProps<{
+  rootSelector?: string
+  highlightClass?: string
+  queryParam?: string
+}>(), {
+  rootSelector: '#srl-page-main',
+  highlightClass: 'searchTarget',
+  queryParam: 'searchTarget'
+})
+
+const route = useRoute()
+
+let mutationObserver: MutationObserver | null = null
+let highlightTimeout: ReturnType<typeof setTimeout> | null = null
+let isApplyingHighlight = false
+let hasScrolledToHighlight = false
+
+function getRootElement(): HTMLElement | null {
+  return document.querySelector(props.rootSelector)
+}
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+function removeHighlights(root: HTMLElement): void {
+  const highlights = root.querySelectorAll(`span.${props.highlightClass}`)
+
+  highlights.forEach((highlight) => {
+    const parent = highlight.parentNode
+    if (!parent) return
+
+    parent.replaceChild(document.createTextNode(highlight.textContent ?? ''), highlight)
+    parent.normalize()
+  })
+}
+
+function highlightTextNodes(root: HTMLElement, term: string): number {
+  const safeTermPattern = escapeRegExp(term)
+  const regex = new RegExp(`(${safeTermPattern})`, 'gi')
+
+  const walker = document.createTreeWalker(
+    root,
+    NodeFilter.SHOW_TEXT,
+    {
+      acceptNode(node) {
+        const parent = node.parentElement
+        if (!parent) return NodeFilter.FILTER_REJECT
+
+        const tag = parent.tagName.toLowerCase()
+        if (
+          tag === 'script' ||
+          tag === 'style' ||
+          tag === 'noscript' ||
+          tag === 'textarea'
+        ) {
+          return NodeFilter.FILTER_REJECT
+        }
+
+        if (parent.closest(`.${props.highlightClass}`)) {
+          return NodeFilter.FILTER_REJECT
+        }
+
+        const text = node.textContent
+        if (!text || !text.trim()) return NodeFilter.FILTER_SKIP
+
+        regex.lastIndex = 0
+        if (!regex.test(text)) return NodeFilter.FILTER_SKIP
+
+        return NodeFilter.FILTER_ACCEPT
+      }
+    }
+  )
+
+  const textNodes: Text[] = []
+  let node: Node | null = null
+
+  while ((node = walker.nextNode())) {
+    textNodes.push(node as Text)
+  }
+
+  let hitCount = 0
+
+  for (const textNode of textNodes) {
+    const text = textNode.textContent ?? ''
+    regex.lastIndex = 0
+
+    const matches = [...text.matchAll(regex)]
+    if (!matches.length) continue
+
+    const fragment = document.createDocumentFragment()
+    let lastIndex = 0
+
+    for (const match of matches) {
+      const matchText = match[0]
+      const index = match.index ?? 0
+
+      if (index > lastIndex) {
+        fragment.appendChild(document.createTextNode(text.slice(lastIndex, index)))
+      }
+
+      const span = document.createElement('span')
+      span.className = props.highlightClass
+      span.textContent = matchText
+      fragment.appendChild(span)
+
+      lastIndex = index + matchText.length
+      hitCount++
+    }
+
+    if (lastIndex < text.length) {
+      fragment.appendChild(document.createTextNode(text.slice(lastIndex)))
+    }
+
+    textNode.parentNode?.replaceChild(fragment, textNode)
+  }
+
+  return hitCount
+}
+
+function scrollToFirstHighlight(root: HTMLElement): void {
+  const firstHighlight = root.querySelector<HTMLElement>(`.${props.highlightClass}`)
+  if (!firstHighlight) return
+
+  firstHighlight.scrollIntoView({
+    behavior: 'smooth',
+    block: 'center',
+    inline: 'nearest'
+  })
+}
+
+function stopObserver(): void {
+  mutationObserver?.disconnect()
+}
+
+function startObserver(): void {
+  const root = getRootElement()
+  if (!root) return
+
+  stopObserver()
+
+  mutationObserver = new MutationObserver(() => {
+    if (isApplyingHighlight) return
+    scheduleHighlight()
+  })
+
+  mutationObserver.observe(root, {
+    childList: true,
+    subtree: true,
+    characterData: true
+  })
+}
+
+function scheduleHighlight(): void {
+  if (highlightTimeout) {
+    clearTimeout(highlightTimeout)
+  }
+
+  highlightTimeout = setTimeout(() => {
+    void applySearchHighlight()
+  }, 0)
+}
+
+async function applySearchHighlight(): Promise<void> {
+  const root = getRootElement()
+  if (!root || isApplyingHighlight) return
+
+  const rawSearchTarget = route.query[props.queryParam]
+  const searchTarget =
+    typeof rawSearchTarget === 'string'
+      ? decodeURIComponent(rawSearchTarget).trim()
+      : ''
+
+  isApplyingHighlight = true
+  stopObserver()
+
+  try {
+    removeHighlights(root)
+
+    if (!searchTarget) {
+      hasScrolledToHighlight = false
+      return
+    }
+
+    await nextTick()
+
+    const hitCount = highlightTextNodes(root, searchTarget)
+
+    if (hitCount > 0 && !hasScrolledToHighlight) {
+      await nextTick()
+      scrollToFirstHighlight(root)
+      hasScrolledToHighlight = true
+    }
+  } finally {
+    isApplyingHighlight = false
+    startObserver()
+  }
+}
+
+onMounted(async () => {
+  await nextTick()
+  startObserver()
+  await applySearchHighlight()
+})
+
+watch(
+  () => route.fullPath,
+  async () => {
+    hasScrolledToHighlight = false
+    await nextTick()
+    scheduleHighlight()
+  }
+)
+
+watch(
+  () => props.rootSelector,
+  async () => {
+    hasScrolledToHighlight = false
+    await nextTick()
+    startObserver()
+    scheduleHighlight()
+  }
+)
+
+onBeforeUnmount(() => {
+  stopObserver()
+
+  if (highlightTimeout) {
+    clearTimeout(highlightTimeout)
+  }
+})
+</script>
+
+<template />
+
+<style lang="scss">
+@use "srl";
+.searchTarget {
+  background-color: srl.colors-primary-1000();
+  color: srl.colors-white-1000();
+}
+</style>

package/livingdocs/999.Properties/font-color/properties.json

@@ -0,0 +1,15 @@
+{
+  "font-color": {
+    "label": "Font color",
+    "type": "select",
+    "options": [
+      {
+        "caption": "Default"
+      },
+      {
+        "caption": "white",
+        "value": "srl-color-white-1000"
+      }
+    ]
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-reporting/base",
-  "version": "1.0.38",
+  "version": "1.0.40",
   "description": "Manage srl templates, build and publish",
   "repository": {
     "url": "https://github.com/mmssolutionsio/simple-reporting-library"

package/scripts/config.js

@@ -35,6 +35,8 @@ export const baseComponentsToInstall = [
   '110.PDF/080.pdf-toc-page',
   '110.PDF/090.pdf-toc-item-title',
   '110.PDF/100.pdf-toc-item',
+  '130.Hosting_Components/010.download-center',
+  '130.Hosting_Components/020.search',
   '999.Properties/alignment',
   '999.Properties/hide-quote-characters',
   '999.Properties/icon',

package/scss/spacer/mixins.scss

@@ -9,27 +9,53 @@
 }
 
 @mixin margin-block($spacer) {
-  margin-block: functions.get($spacer);
+  @if system.$build == "word" {
+    margin-top: functions.get($spacer);
+    margin-bottom: functions.get($spacer);
+  } @else {
+    margin-block: functions.get($spacer);
+  }
 }
 
 @mixin margin-inline($spacer) {
-  margin-inline: functions.get($spacer);
+  @if system.$build == "word" {
+    margin-left: functions.get($spacer);
+    margin-right: functions.get($spacer);
+  } @else {
+    margin-inline: functions.get($spacer);
+  }
 }
 
 @mixin margin-top($spacer) {
-  margin-block-start: functions.get($spacer);
+  @if system.$build == "word" {
+    margin-top: functions.get($spacer);
+  } @else {
+    margin-block-start: functions.get($spacer);
+  }
 }
 
 @mixin margin-right($spacer) {
-  margin-inline-end: functions.get($spacer);
+  @if system.$build == "word" {
+    margin-right: functions.get($spacer);
+  } @else {
+    margin-inline-end: functions.get($spacer);
+  }
 }
 
 @mixin margin-bottom($spacer) {
-  margin-block-end: functions.get($spacer);
+  @if system.$build == "word" {
+    margin-bottom: functions.get($spacer);
+  } @else {
+    margin-block-end: functions.get($spacer);
+  }
 }
 
 @mixin margin-left($spacer) {
-  margin-inline-start: functions.get($spacer);
+  @if system.$build == "word" {
+    margin-left: functions.get($spacer);
+  } @else {
+    margin-inline-start: functions.get($spacer);
+  }
 }
 
 @mixin padding($spacer) {
@@ -37,27 +63,53 @@
 }
 
 @mixin padding-block($spacer) {
-  padding-block: functions.get($spacer);
+  @if system.$build == "word" {
+    padding-top: functions.get($spacer);
+    padding-bottom: functions.get($spacer);
+  } @else {
+    padding-block: functions.get($spacer);
+  }
 }
 
 @mixin padding-inline($spacer) {
-  padding-inline: functions.get($spacer);
+  @if system.$build == "word" {
+    padding-left: functions.get($spacer);
+    padding-right: functions.get($spacer);
+  } @else {
+    padding-inline: functions.get($spacer);
+  }
 }
 
 @mixin padding-top($spacer) {
-  padding-block-start: functions.get($spacer);
+  @if system.$build == "word" {
+    padding-top: functions.get($spacer);
+  } @else {
+    padding-block-start: functions.get($spacer);
+  }
 }
 
 @mixin padding-right($spacer) {
-  padding-inline-end: functions.get($spacer);
+  @if system.$build == "word" {
+    padding-right: functions.get($spacer);
+  } @else {
+    padding-inline-end: functions.get($spacer);
+  }
 }
 
 @mixin padding-bottom($spacer) {
-  padding-block-end: functions.get($spacer);
+  @if system.$build == "word" {
+    padding-bottom: functions.get($spacer);
+  } @else {
+    padding-block-end: functions.get($spacer);
+  }
 }
 
 @mixin padding-left($spacer) {
-  padding-inline-start: functions.get($spacer);
+  @if system.$build == "word" {
+    padding-left: functions.get($spacer);
+  } @else {
+    padding-inline-start: functions.get($spacer);
+  }
 }
 
 @mixin gap($spacer) {

package/srl/srl/fa/index.scss

@@ -63,7 +63,7 @@
   @return 900;
 }
 
-@mixin content($icon, $style: solid) {
+@mixin content($icon, $style: v.$default-style) {
   @if not map.has-key(v.$brand-icons, $icon) and not map.has-key(v.$icons, $icon) {
     @debug "Icon "#{$icon}" not found in Font Awesome 7.";
   } @else {
@@ -88,7 +88,7 @@
   }
 }
 
-@mixin content-before($icon, $style: solid) {
+@mixin content-before($icon, $style: v.$default-style) {
   @if not map.has-key(v.$brand-icons, $icon) and not map.has-key(v.$icons, $icon) {
     @debug "Icon "#{$icon}" not found in Font Awesome 7.";
   } @else {

package/srl/srl/fa/source-free.scss

@@ -8,7 +8,4 @@
 @forward "@fortawesome/fontawesome-free/scss/variables";
 @forward "@fortawesome/fontawesome-free/scss/mixins";
 $type: free;
-$default-style: light;
-@if map.has-key(meta.$meta, icon, default-style) {
-  $default-style: map.get(meta.$meta, icon, default-style);
-}
+$default-style: solid;

package/srl/srl/pdf/PDFNestedContainers.ts

@@ -0,0 +1,110 @@
+export interface PDFNestedContainerMarkerConfig {
+  selector?: string
+}
+
+export class PDFNestedContainers {
+  private containers: NodeListOf<HTMLElement>
+
+  private excludedClasses = ['srl-grid', 'srl-linkable', 'srl-nested-container']
+
+  private wrapperClasses = ['srl-grid']
+
+  constructor(config: PDFNestedContainerMarkerConfig = {}) {
+    const { selector = '.srl-nested-container' } = config
+
+    this.containers = document.querySelectorAll(selector)
+
+    if (this.containers.length === 0) {
+      return
+    }
+
+    this.markContainers()
+  }
+
+  private markContainers(): void {
+    this.containers.forEach((container) => {
+      const firstElement = this.findEdgeElement(container, 'first')
+      const lastElement = this.findEdgeElement(container, 'last')
+
+      const firstClass = firstElement ? this.getRelevantClass(firstElement) : null
+      const lastClass = lastElement ? this.getRelevantClass(lastElement) : null
+
+      if (firstClass) {
+        container.classList.add(`${firstClass}-first`)
+      }
+
+      if (lastClass) {
+        container.classList.add(`${lastClass}-last`)
+      }
+    })
+  }
+
+  private findEdgeElement(root: HTMLElement, direction: 'first' | 'last'): HTMLElement | null {
+    const children = Array.from(root.children) as HTMLElement[]
+
+    const orderedChildren = direction === 'first' ? children : [...children].reverse()
+
+    for (const child of orderedChildren) {
+      if (this.isLayoutWrapper(child)) {
+        const nestedElement = this.findEdgeElement(child, direction)
+
+        if (nestedElement) {
+          return nestedElement
+        }
+
+        continue
+      }
+
+      const relevantClass = this.getRelevantClass(child)
+
+      if (relevantClass) {
+        return child
+      }
+
+      const nestedElement = this.findEdgeElement(child, direction)
+
+      if (nestedElement) {
+        return nestedElement
+      }
+    }
+
+    return null
+  }
+
+  private isLayoutWrapper(el: HTMLElement): boolean {
+    const classes = Array.from(el.classList)
+
+    if (classes.some((cls) => this.wrapperClasses.includes(cls))) {
+      return true
+    }
+
+    if (classes.some((cls) => cls.includes('__'))) {
+      return true
+    }
+
+    if (el.hasAttribute('doc-container') && !this.getRelevantClass(el)) {
+      return true
+    }
+
+    return false
+  }
+
+  private getRelevantClass(el: HTMLElement): string | null {
+    const classes = Array.from(el.classList)
+
+    const relevant = classes.find((cls) => {
+      if (!cls.startsWith('srl-')) return false
+      if (this.excludedClasses.includes(cls)) return false
+      if (cls.includes('__')) return false
+      if (this.wrapperClasses.includes(cls)) return false
+      if (cls.endsWith('-first')) return false
+      if (cls.endsWith('-last')) return false
+
+      return true
+    })
+
+    return relevant || null
+  }
+}
+
+export default PDFNestedContainers

package/srl/srl/pdf/PDFNotes.ts

@@ -2,7 +2,7 @@ export interface PDFNotesConfig {
   noteClass: string; // kann mehrere Selektoren per Komma enthalten
 }
 
-export default class PDFNotes {
+export class PDFNotes {
   private notesArticles: NodeListOf<HTMLElement>;
   private selectors: string[];
   private excludedClasses = ['srl-grid', 'srl-linkable'];
@@ -68,4 +68,6 @@ export default class PDFNotes {
       // last.classList.add(`last-note-${typeKey}`);
     });
   }
-}
+}
+
+export default PDFNotes

package/srl/srl/pdf/PDFSetPageNumbers.ts

@@ -3,7 +3,7 @@ export interface PDFSetPageNumbersConfig {
   tocItemPageNumberClass: string;
 }
 
-export default class PDFSetPageNumbers {
+export class PDFSetPageNumbers {
   private tocItems: NodeListOf<HTMLElement>;
   private pageNumberClass: string;
 
@@ -23,3 +23,5 @@ export default class PDFSetPageNumbers {
     });
   }
 }
+
+export default PDFSetPageNumbers