@simple-reporting/base 1.0.8 → 1.0.10

package/dev/package.json

@@ -16,10 +16,10 @@
     "type-check": "vue-tsc --build",
     "lint": "eslint . --fix",
     "format": "prettier --write src/",
-    "postinstall": "srl prepare"
+    "postinstall": "npx srl prepare"
   },
   "dependencies": {
-    "@simple-reporting/base": "^1.0.8",
+    "@simple-reporting/base": "^1.0.10",
     "axios": "^1.9.0",
     "chalk": "^5.4.1",
     "exceljs": "^4.4.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-reporting/base",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "Manage srl templates, build and publish",
   "bin": {
     "srl": "cli.js"

package/srl/components/Srl/Note/Accordion/Content.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const props = defineProps<{
+  id: string
+  open: boolean
+}>()
+</script>
+
+<template>
+<div :id="props.id" :hidden="!props.open">
+  <slot/>
+</div>
+</template>

package/srl/components/Srl/Note/Accordion/Toggle.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const props = defineProps<{
+  id: string
+  open: boolean
+  toggle: () => void
+}>()
+</script>
+
+<template>
+  <button @click="props.toggle()" :aria-expanded="props.open" :aria-controls="props.id">
+    <slot/>
+  </button>
+</template>

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

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ref, useId } from 'vue'
+
+const id = ref(useId())
+const accordion = ref<HTMLDivElement>()
+const open = ref(false)
+
+function toggle() {
+  open.value = !open.value
+}
+</script>
+
+<template>
+  <div ref="accordion">
+    <slot :id="id" :open="open" :toggle="toggle"/>
+  </div>
+</template>

package/srl/composables/search.ts

@@ -38,6 +38,7 @@
  */
 import { computed, type ComputedRef, ref } from 'vue';
 import { HTMLElement, parse as parseHtml } from 'node-html-parser';
+import { useConfig, useArticles } from '#composables';
 
 const storage = ref<{
   [locale: string]: NsWowSearchList[];
@@ -68,7 +69,7 @@ function makeWords(html: string) {
     .replace(/\s{2,}/g, ' ');
 }
 
-export default async function useSearch(): ComputedRef<NsWowSearchList[]> {
+export default async function useSearch(): Promise<ComputedRef<NsWowSearchList[]>> {
   const config = useConfig();
   if (!storage.value || !storage.value[config.value.locale]) {
     !storage.value ? (storage.value = {}) : null;

package/srl/plugins/vueSrlPlugin.ts

@@ -5,6 +5,10 @@ import SrlArticleRoot from '#components/Srl/Article/Root.vue';
 import SrlArticleDialogButton from '#components/Srl/Article/DialogButton.vue';
 import SrlMenu from '#components/Srl/Menu/List.vue';
 import SrlPageDialog from '#components/Srl/Page/Dialog.vue';
+import SrlNoteAccordion from '#components/Srl/Note/Accordion.vue';
+import SrlNoteAccordionToggle from '#components/Srl/Note/Accordion/Toggle.vue';
+import SrlNoteAccordionContent from '#components/Srl/Note/Accordion/Content.vue';
+
 import asyncLdComponent from './asyncLdComponent.ts';
 
 export default {
@@ -12,6 +16,9 @@ export default {
     app.component('SrlAriaTabChain', defineComponent(SrlAriaTabChain));
     app.component('SrlArticleAutoload', defineComponent(SrlArticleAutoload));
     app.component('SrlArticleRoot', defineComponent(SrlArticleRoot));
+    app.component('SrlNoteAccordion', defineComponent(SrlNoteAccordion));
+    app.component('SrlNoteAccordionToggle', defineComponent(SrlNoteAccordionToggle));
+    app.component('SrlNoteAccordionContent', defineComponent(SrlNoteAccordionContent));
     app.component(
       'SrlArticleDialogButton',
       defineComponent(SrlArticleDialogButton),

package/srl/types/nswow.d.ts

@@ -92,6 +92,9 @@ declare global {
   export type NsWowNavigationItem = {
     label: string;
     title?: string;
+    icon?: string;
+    iconBefore?: string;
+    iconAfter?: string;
     img?: {
       src: string;
       alt?: string;

package/srl/utils/html.ts

@@ -1,12 +1,110 @@
 import { isRouterPath } from '#utils/uri.ts';
 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(' ');
 }
 
+function replaceAccordionContainer(text: string): string {
+  const openTagRegex = /<div([^>]*\bclass\s*=\s*["']lc-accordion\s[^"']*["'][^>]*)>/gi;
+  let result = '';
+  let lastIndex = 0;
+  let match;
+
+  while ((match = openTagRegex.exec(text)) !== null) {
+    const start = match.index;
+    const attrs = match[1];
+    let depth = 1;
+    let end = openTagRegex.lastIndex;
+
+    while (depth > 0) {
+      const nextOpen = text.indexOf('<div', end);
+      const nextClose = text.indexOf('</div>', end);
+      if (nextClose === -1) break;
+      if (nextOpen !== -1 && nextOpen < nextClose) {
+        depth++;
+        end = nextOpen + 4;
+      } else {
+        depth--;
+        end = nextClose + 6;
+      }
+    }
+
+    const innerContent = replaceAccordionContainer(text.slice(openTagRegex.lastIndex, end - 6));
+
+    result += text.slice(lastIndex, start);
+    result += `<srl-note-accordion${attrs}>${innerContent}</srl-note-accordion>`;
+    lastIndex = end;
+    openTagRegex.lastIndex = end;
+  }
+  result += text.slice(lastIndex);
+  return result;
+}
+
+function replaceAccordionToggle(text: string): string {
+  const openTagRegex = /<div([^>]*\bclass\s*=\s*["']lc-accordion__head\s[^"']*["'][^>]*)>/gi;
+  let result = '';
+  let lastIndex = 0;
+  let match;
+
+  while ((match = openTagRegex.exec(text)) !== null) {
+    const start = match.index;
+    const attrs = match[1];
+    const contentStart = openTagRegex.lastIndex;
+    const closeTag = '</div>';
+    const end = text.indexOf(closeTag, contentStart);
+    if (end === -1) break;
+
+    const innerContent = text.slice(contentStart, end);
+
+    result += text.slice(lastIndex, start);
+    result += `<srl-note-accordion-toggle${attrs}>${innerContent}</srl-note-accordion-toggle>`;
+    lastIndex = end + closeTag.length;
+    openTagRegex.lastIndex = lastIndex;
+  }
+  result += text.slice(lastIndex);
+  return result;
+}
+
+function replaceAccordionContent(text: string): string {
+  const openTagRegex = /<div([^>]*\bclass\s*=\s*["']lc-accordion__content(?:\s[^"']*)?["'][^>]*)>/gi;
+  let result = '';
+  let lastIndex = 0;
+  let match;
+
+  while ((match = openTagRegex.exec(text)) !== null) {
+    const start = match.index;
+    const attrs = match[1];
+    let depth = 1;
+    let end = openTagRegex.lastIndex;
+
+    while (depth > 0) {
+      const nextOpen = text.indexOf('<div', end);
+      const nextClose = text.indexOf('</div>', end);
+      if (nextClose === -1) break;
+      if (nextOpen !== -1 && nextOpen < nextClose) {
+        depth++;
+        end = nextOpen + 4;
+      } else {
+        depth--;
+        end = nextClose + 6;
+      }
+    }
+
+    const innerContent = replaceAccordionContent(text.slice(openTagRegex.lastIndex, end - 6));
+
+    result += text.slice(lastIndex, start);
+    result += `<srl-note-accordion-content${attrs}>${innerContent}</srl-note-accordion-content>`;
+    lastIndex = end;
+    openTagRegex.lastIndex = end;
+  }
+  result += text.slice(lastIndex);
+  return result;
+}
+
 export function prepareHtmlContent(text: string): string {
   const articles = useArticles();
   const locale = useLocale();
@@ -14,8 +112,8 @@ export function prepareHtmlContent(text: string): string {
   const regex = /<a\s+([^>]+)>(.*?)<\/a>/gis;
   text = text.replace(regex, (match, attrString, innerText) => {
     // Attribute in ein Array umwandeln
-    const attrObj = {};
-    attrString.replace(/([a-zA-Z0-9\-_]+)(?:="([^"]*)")?/g, (m, key, value) => {
+    const attrObj: AttrObj = {};
+    attrString.replace(/([a-zA-Z0-9\-_]+)(?:="([^"]*)")?/g, (m, key: string, value: string | null) => {
       attrObj[key] = value || null;
       return m;
     });
@@ -66,6 +164,15 @@ export function prepareHtmlContent(text: string): string {
     return match;
   });
 
+  text = text.replace(
+    /<template-([a-z]+)>([\s\S]*?)<\/template-\1>/g,
+    (_match, name, content) => `<template #${name}>${content}</template>`
+  );
+
+  text = replaceAccordionContainer(text)
+  text = replaceAccordionToggle(text)
+  text = replaceAccordionContent(text)
+
   text = text.replaceAll('../', `./`);
 
   text = text.replace(/<style[^>]*>([\s\S]*?)<\/style>/gi, (match, p1) => {