@simple-reporting/base 1.0.33 → 1.0.35

package/scripts/build.js

@@ -20,12 +20,14 @@ import {
   writeLivingDocsJson,
 } from './utils.js';
 import { nsWowInternalLddUrl } from './config.js';
-import folders from './folders.js';
+import folders, { srlSystem } from './folders.js';
 import { mapLdd } from './ldd/mapLdd.js';
 import { LivingdocsDesignValidator } from './ldd/LivingdocsDesignValidator.js';
 import { camelCase } from './utils.js';
+import { stripMediaFromCssFile } from './css/stripMediaFromCss.js';
 import { buildVariables } from './build/variables.js';
 import './dotenv.js';
+import { readJson } from 'fs-extra/esm';
 
 const placeholderId = '6297EAFB-33A0-48B8-8D64-E61CDC3E9035';
 const nswowPath = folders.srlImports;
@@ -360,6 +362,11 @@ async function buildXbrl() {
   }
 }
 
+async function finalizeXbrl() {
+  console.log('\n\nFinalize XBRL');
+  await stripMediaFromCssFile(join(folders.srlOutput, 'xbrl', 'xbrl.css'));
+}
+
 /**
  * Builds Living Documentation (LDD) for a project.
  *
@@ -370,7 +377,7 @@ async function buildXbrl() {
 async function buildLdd(version) {
   console.log('\n\nBuild Livingdocs');
   buildVariables.system.environment = 'production';
-  buildVariables.system.build = 'ldd';
+  buildVariables.system.build = 'editor';
   buildVariables.system['size-unit'] = 'rem';
 
   await checkFolders();
@@ -851,6 +858,10 @@ async function build(version, options = {}) {
       await buildPdfCustomer(options.customer);
     }
 
+    if (has('xbrl') || has('xhtml')) {
+      await finalizeXbrl();
+    }
+
     if (has('ldd')) {
       await zipLdd();
     }
@@ -886,6 +897,60 @@ function cleanupScssAlias(string) {
   return string.replace(/[^a-zA-Z0-9]/g, '');
 }
 
+async function generateUseSrlConfig() {
+  const content = await readJson(join(folders.root, 'srl.config.json'));
+  const c = [
+    `import { ref } from 'vue';`,
+    `const srlConfig = ref(${JSON.stringify(content, null, 2)})`,
+    'export default function useSrlConfig() {',
+    `  return srlConfig`,
+    '}'
+  ]
+
+  writeFileSync(
+    join(folders.srlComposables, 'srlConfig.ts'),
+    c.join('\n'),
+  );
+}
+
+async function mapIndexScss() {
+  const files = await glob(join(folders.srlAssets, 'scss', 'placeholders', '**', '*.scss'), {
+    withFileTypes: true,
+    nosort: false,
+  });
+
+  files.sort((a, b) => a.name < b.name ? -1 : a.name > b.name ? 1 : 0);
+
+  const relativePathToRoot = join('..', '/');
+
+  const map = [];
+
+  for (let x = 0; x < files.length; x++) {
+    const alias = cleanupScssAlias(files[x].relativePosix());
+    map.push(`@use "${relativePathToRoot}${files[x].relativePosix()}" as ${alias};`);
+  }
+
+  const c = [
+    `@use './config';`,
+    ...map,
+    `@forward './system' as system-*;`,
+    `@forward './fonts' as fonts-*;`,
+    `@forward './grid' as grid-*;`,
+    `@forward './colors' as colors-*;`,
+    `@forward './typography' as typography-*;`,
+    `@forward './helpers' as helpers-*;`,
+    `@forward './spacer' as spacer-*;`,
+    `@forward './meta';`,
+  ]
+
+  writeFileSync(
+    join(folders.srlSystem, 'index.scss'),
+    c.join('\n'),
+  );
+
+  return true;
+}
+
 /**
  * Maps SCSS files and generates import statements for different output files.
  *
@@ -1157,4 +1222,4 @@ async function map() {
   return true;
 }
 
-export { build, ddev, map, mapScss, mapLdd, mapJs };
+export { build, ddev, map, generateUseSrlConfig, mapIndexScss, mapScss, mapLdd, mapJs };

package/scripts/css/stripMediaFromCss.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Entfernt @media aus exakt einer CSS-Datei und ersetzt diese Datei durch das Ergebnis.
+ * @param {string} cssPath absoluter oder relativer Pfad zur .css Datei
+ */
+export function stripMediaFromCssFile(cssPath: string): Promise<{
+    file: string;
+    removed: number;
+}>;
+export type RemoveMediaPayload = {
+    params: string;
+    atRule: import("postcss").AtRule;
+    fullRuleText: string;
+};
+export type RemoveAllMediaPluginOptions = {
+    onRemoveMedia?: (payload: RemoveMediaPayload) => void;
+    shouldLogRemovedMedia?: (params: string, atRule: import("postcss").AtRule) => boolean;
+};

package/scripts/css/stripMediaFromCss.js

@@ -0,0 +1,147 @@
+import { readFile, writeFile, stat } from 'node:fs/promises';
+import postcss from 'postcss';
+
+/**
+ * Entfernt alle @media-At-Rules aus CSS.
+ * Wichtig: bewusst AST-basiert (PostCSS), damit keine False-Positives entstehen.
+ */
+
+const normalizeMediaParams = (params) =>
+  (params ?? '')
+    .trim()
+    // Whitespace normalisieren
+    .replace(/\s+/g, ' ')
+    // rund um Doppelpunkt vereinheitlichen
+    .replace(/\s*:\s*/g, ': ')
+    // "and" sauber trennen, falls Minifier Leerzeichen frisst
+    .replace(/\)\s*and\s*\(/gi, ') and (')
+    .replace(/\)and\(/gi, ') and (');
+
+const isPrefersReducedMotionReduce = (params) => {
+  const p = normalizeMediaParams(params).toLowerCase();
+  return p === '(prefers-reduced-motion: reduce)';
+};
+
+/**
+ * @typedef {{
+ *  params: string,
+ *  atRule: import('postcss').AtRule,
+ *  fullRuleText: string
+ * }} RemoveMediaPayload
+ */
+
+/**
+ * @typedef {{
+ *  onRemoveMedia?: (payload: RemoveMediaPayload) => void,
+ *  shouldLogRemovedMedia?: (params: string, atRule: import('postcss').AtRule) => boolean
+ * }} RemoveAllMediaPluginOptions
+ */
+
+/**
+ * @param {RemoveAllMediaPluginOptions} [opts]
+ */
+const removeAllMediaPlugin = (opts = {}) => {
+  const {
+    onRemoveMedia = () => {},
+    shouldLogRemovedMedia = () => true,
+  } = opts;
+
+  return {
+    postcssPlugin: 'remove-all-media',
+    AtRule: {
+      media: (atRule) => {
+        const params = atRule.params;
+
+        // erst loggen, dann entfernen
+        try {
+          if (shouldLogRemovedMedia(params, atRule)) {
+            // Wichtig: vor dem remove() stringifizieren, sonst ist der Knoten weg
+            const fullRuleText = atRule.toString();
+            onRemoveMedia({ params, atRule, fullRuleText });
+          }
+        } finally {
+          atRule.remove();
+        }
+      },
+    },
+  };
+};
+removeAllMediaPlugin.postcss = true;
+
+async function fileExists(path) {
+  try {
+    const s = await stat(path);
+    return s.isFile();
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Entfernt @media aus exakt einer CSS-Datei und ersetzt diese Datei durch das Ergebnis.
+ * @param {string} cssPath absoluter oder relativer Pfad zur .css Datei
+ */
+export async function stripMediaFromCssFile(cssPath) {
+  const css = await readFile(cssPath, 'utf8');
+  const mapPath = `${cssPath}.map`;
+  const hasMap = await fileExists(mapPath);
+
+  const prevMap = hasMap ? JSON.parse(await readFile(mapPath, 'utf8')) : false;
+
+  /** @type {string[]} */
+  const removedEntries = [];
+
+  const result = await postcss([
+    removeAllMediaPlugin({
+      shouldLogRemovedMedia: (params) => !isPrefersReducedMotionReduce(params),
+      onRemoveMedia: ({ params, fullRuleText }) => {
+        const normalized = normalizeMediaParams(params);
+        // Eine Zeile pro Eintrag (inkl. Inhalt). Wir hängen den kompletten Block an,
+        // aber ohne das doppelte "@media ..." Prefix.
+        const body = fullRuleText.replace(/^@media\s+[^{}]+\s*/i, '');
+        removedEntries.push(`@media ${normalized} ${body}`);
+      },
+    }),
+  ]).process(css, {
+    from: cssPath,
+    to: cssPath,
+    map: hasMap
+      ? {
+          inline: false,
+          annotation: true,
+          prev: prevMap,
+        }
+      : false,
+  });
+
+  await writeFile(cssPath, result.css ?? '', 'utf8');
+
+  if (hasMap && result.map) {
+    await writeFile(mapPath, result.map.toString(), 'utf8');
+  }
+
+  // Output nur, wenn wirklich etwas entfernt wurde
+  if (removedEntries.length > 0) {
+    console.log('[strip-media]');
+    console.log('');
+    for (const line of removedEntries) console.log(line);
+    console.log('');
+    console.log(`[strip-media] result: removed ${removedEntries.length} @media block(s)`);
+  }
+
+  return { file: cssPath, removed: removedEntries.length };
+}
+
+// CLI Nutzung: node scripts/stripMediaFromCss.mjs <cssFilePath>
+if (import.meta.url === `file://${process.argv[1]}`) {
+  const cssFilePath = process.argv[2];
+  if (!cssFilePath) {
+    console.error('Usage: node scripts/stripMediaFromCss.mjs <cssFilePath>');
+    process.exit(1);
+  }
+
+  stripMediaFromCssFile(cssFilePath).catch((e) => {
+    console.error(e);
+    process.exit(1);
+  });
+}

package/scripts/vue/components.js

@@ -39,8 +39,10 @@ export async function vueComponents() {
   const appComponents = readVueDir(folders.srlSrc, '@/');
   const srlComponents = readVueDir(folders.srlRoot, '#');
 
-  const components = []
-  const types = []
+  const components = [
+    `app.component('SrlDevTools', defineAsyncComponent(() => import('@simple-reporting/base/devTools/SrlDevTools.vue')));`,
+  ]
+  const types = [];
 
   for (const [name, info] of Object.entries(appComponents)) {
     components.push(
@@ -66,6 +68,11 @@ export async function vueComponents() {
     }
   }
 
+  types.push({
+    name: 'SrlDevTools',
+    type: `  type SrlDevTools = typeof import('@simple-reporting/base/devTools/SrlDevTools.vue')['default'];`,
+  });
+
   writeFileSync(join(folders.srlPlugins, 'asyncSrlComponents.ts'),
 `import { defineAsyncComponent, type App } from 'vue';
 export default function asyncSrlComponents(app: App): void {

package/srl/.srl/App.vue

@@ -36,7 +36,7 @@
  * to other components in the application.
  */
 import App from '@/App.vue';
-import { onMounted, watch } from 'vue'
+import { computed, onMounted, watch } from 'vue'
 import { useCssStyles } from '#composables'
 import { setMounted } from '#utils'
 
@@ -51,6 +51,11 @@ watch(
   },
   { immediate: true },
 );
+
+const devToolsEnabled = computed(() => {
+  return import.meta.env.DEV && import.meta.env.VITE_DISABLE_SRL_DEVTOOLS !== 'true'
+})
+
 onMounted(() => {
   setMounted(true)
 });
@@ -60,4 +65,5 @@ onMounted(() => {
   <suspense>
     <App />
   </suspense>
+  <SrlDevTools v-if="devToolsEnabled" />
 </template>

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

@@ -53,6 +53,7 @@ onMounted(() => {
     content.value.id = id
     content.value.setAttribute('tabindex', '-1')
     toggle.value.setAttribute('aria-controls', id)
+    toggle.value.setAttribute('aria-expanded', 'false')
 
     toggle.value.addEventListener('click', () => {
       toggle.value?.getAttribute('aria-expanded') === 'true' ? close() : open()

package/srl/.srl/components/Srl/Article/Root.vue

@@ -44,13 +44,13 @@ const article = useArticle();
 
 if (article.value) {
   const file = `./html/${locale}/${article.value.name}.html`;
-  const publicationTitle = config.value.settings.publicationName[locale];
-
+  const publicationTitle = config.value.settings?.publicationName?[locale] : null;
   try {
     const req = await fetch(file);
     let text = await req.text();
-
-    document.title = `${article.value.translatedTitle} - ${publicationTitle}`;
+    const title = [article.value.translatedTitle];
+    publicationTitle ? title.push(publicationTitle as string) : null;
+    document.title = title.join(' - ');
     content.value = prepareHtmlContent(text);
   } catch (error) {
     console.error(`Failed to load article content from ${file}:`, error);

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

@@ -6,7 +6,8 @@ const props = defineProps<{
     toggle: () => void;
     open: () => void;
     close: () => void;
-  };
+  }
+  level: number
 }>()
 
 </script>

package/srl/.srl/components/Srl/Menu/Item.vue

@@ -49,17 +49,25 @@ const breadcrumb = defineModel<NsWowNavigationItem[]>('breadcrumb', {
   required: true,
 }) as Ref<NsWowNavigationItem[]>
 
-const emit = defineEmits([
-  'toggle',
-  'open',
-  'close',
-  'link',
-  'routerChange',
-  'next',
-  'prev',
-  'tab',
-  'back',
-])
+const emit = defineEmits<{
+  (e: 'toggle', payload: {
+    element: HTMLAnchorElement | HTMLButtonElement
+    itemEl: HTMLLIElement
+    menu: SrlMenu
+    menuEl: HTMLUListElement
+    opened: boolean
+    props: typeof props
+  }): void
+  (e: 'open', payload: { index: number | string }): void
+  (e: 'close', payload: { index: number | string }): void
+  (e: 'link'): void
+  (e: 'routerChange'): void
+  (e: 'next', payload: { index: number | string }): void
+  (e: 'prev', payload: { index: number | string }): void
+  (e: 'tab'): void
+  (e: 'back'): void
+}>()
+
 const id = ref<number | string | undefined>()
 if (props.item.children) {
   id.value = useId()
@@ -68,7 +76,7 @@ if (props.item.children) {
 const currentBackPath = computed<NsWowNavigationItem[]>(() => {
   if (!props.item?.attributes?.class?.includes('srl-menu__link--back')) {
     const i: NsWowNavigationItem = {
-      label: props.item.label
+      label: props.item.label,
     }
     props.item.title ? i.title = props.item.title : null
     props.item.img ? i.img = props.item.img : null
@@ -87,13 +95,20 @@ const currentBackPath = computed<NsWowNavigationItem[]>(() => {
 })
 
 const currentPath = computed<NsWowNavigationItem[]>(() => {
-  return [...props.path, props.item]
+  return [...props.path, {
+    ...props.item,
+    element: $el.value,
+    menu: menu.value,
+    menuEl: menu.value?.$el,
+    itemEl: li.value,
+  }]
 })
 
 const external = ref(props.item.href && isExternalPath(props.item.href))
 
-const menu = ref()
-const $el = ref<HTMLElement | null>(null)
+const menu = ref<SrlMenu | null>(null)
+const li = ref<HTMLLIElement>()
+const $el = ref<HTMLAnchorElement | HTMLButtonElement>()
 const opened = ref(false)
 
 
@@ -109,6 +124,7 @@ function toggleAction() {
   } else {
     menu.value.closeAll()
   }
+  !props.item.callback || props.item.callback($el.value , li.value, menu.value.$el)
   toggle()
 }
 function close() {
@@ -124,7 +140,18 @@ function closeSub() {
 }
 
 function toggle() {
-  emit('toggle')
+  emit('toggle', {
+    element: $el.value!,
+    itemEl: li.value!,
+    menu: menu.value,
+    menuEl: menu.value.$el,
+    opened: opened.value,
+    props: props,
+  })
+}
+
+function toggleBridge(data) {
+  emit('toggle', data)
 }
 
 function next() {
@@ -154,7 +181,7 @@ function back(event: KeyboardEvent) {
 }
 
 function link() {
-  !props.item.callback || props.item.callback()
+  !props.item.callback || props.item.callback($el.value, li.value)
   emit('link')
 }
 
@@ -173,7 +200,13 @@ function closeItem() {
 function findPath(): NsWowNavigationItem[] | null {
   if (opened.value) {
     if (props.item?.children?.length) {
-      let res = [...props.path, props.item]
+      let res = [...props.path, {
+        ...props.item,
+        element: $el.value,
+        menu: menu.value,
+        menuEl: menu.value?.$el,
+        itemEl: li.value,
+      }]
       menu.value.items.forEach((item) => {
         item.opened && (res = item.findPath() || res)
       })
@@ -194,12 +227,12 @@ defineExpose({
 })
 
 function internalLinkClick() {
-  !props.item.callback || props.item.callback()
+  !props.item.callback || props.item.callback($el.value , li.value)
   routerChange()
 }
 
 function externalLinkClick() {
-  !props.item.callback || props.item.callback()
+  !props.item.callback || props.item.callback($el.value , li.value)
   link()
 }
 
@@ -237,7 +270,7 @@ const classListItem = computed(() => {
 </script>
 
 <template>
-  <li v-if="!item.children && props.item.href" role="none" :class="classListLi">
+  <li v-if="!item.children && props.item.href" ref="li" role="none" :class="classListLi">
     <router-link
       v-if="!external"
       ref="$el"
@@ -289,7 +322,7 @@ const classListItem = computed(() => {
       />
     </a>
   </li>
-  <li v-else-if="props.item.callback" role="none" :class="classListLi">
+  <li v-else-if="!item.children && props.item.callback" ref="li" role="none" :class="classListLi">
     <button
       type="button"
       ref="$el"
@@ -315,7 +348,7 @@ const classListItem = computed(() => {
       />
     </button>
   </li>
-  <li v-else :class="classListLi" role="none">
+  <li v-else :class="classListLi" ref="li" role="none">
     <button
       type="button"
       ref="$el"
@@ -365,7 +398,8 @@ const classListItem = computed(() => {
       @routerChange="emit('routerChange')"
       @tab="tab"
       @closeSub="closeSub"
-      @toggle="toggle"
+      @toggle="toggleBridge"
+      @backButtonClick="toggle"
     />
   </li>
 </template>

package/srl/.srl/components/Srl/Menu.vue

@@ -77,6 +77,30 @@ type BackButtonItem = {
   }
 }
 
+type SrlMenuItemProps = {
+  name: string
+  item: NsWowNavigationItem
+  index: number | string
+  disableTab: boolean
+  disableTabIndex: boolean
+  initOpen: number
+  depth: number
+  disableClasses: boolean
+  backButtonEnabled: boolean
+  backButtonLabel: (backPath: NsWowNavigationItem[]) => string
+  backButtonItem?: BackButtonItem
+  backPath: NsWowNavigationItem[]
+  path: NsWowNavigationItem[]
+}
+
+type TogglePayload = {
+  element: HTMLAnchorElement | HTMLButtonElement
+  itemEl: HTMLLIElement
+  menu: SrlMenu
+  opened: boolean
+  props: SrlMenuItemProps
+}
+
 const props = withDefaults(
   defineProps<{
     name: string
@@ -108,17 +132,19 @@ const props = withDefaults(
   },
 )
 
-const emit = defineEmits([
-  'toggle',
-  'close',
-  'closeSub',
-  'link',
-  'routerChange',
-  'nextExceeded',
-  'prevExceeded',
-  'tab',
-  'back',
-])
+const emit = defineEmits<{
+  (e: 'toggle', payload: TogglePayload): void
+  (e: 'backButtonClick'): void
+  (e: 'close'): void
+  (e: 'closeSub'): void
+  (e: 'link'): void
+  (e: 'routerChange'): void
+  (e: 'nextExceeded'): void
+  (e: 'prevExceeded'): void
+  (e: 'tab'): void
+  (e: 'back'): void
+}>()
+
 const items = ref<SrlMenuItem[]>([])
 
 const opened = defineModel('opened', { type: Boolean, default: true })
@@ -140,7 +166,6 @@ function close() {
   } else {
     emit('close')
   }
-  toggle()
 }
 
 function next(event: { index: number }) {
@@ -183,8 +208,8 @@ function routerChange() {
   emit('routerChange')
 }
 
-function toggle() {
-  emit('toggle')
+function toggle(data: TogglePayload) {
+  emit('toggle', data)
 }
 
 function closeAll(keep?: number | string) {
@@ -254,7 +279,10 @@ const menuItems = computed<NsWowNavigationItem[]>(() => {
       'aria-controls': props.id ?? '',
       'aria-expanded': String(opened.value)
     }
-    backItem.callback = close
+    backItem.callback = () => {
+      close()
+      emit('backButtonClick')
+    }
     return [backItem, ...props.menu]
   }
   return props.menu
@@ -320,5 +348,3 @@ defineExpose({
     </template>
   </ul>
 </template>
-
-<style scoped lang="scss"></style>

package/srl/.srl/composables/config.ts

@@ -39,11 +39,12 @@
  * const config = useConfig()
  */
 import { ref, type Ref } from 'vue';
+import { objectDeepAssign } from '../utils/object.ts'
 
 const config = ref<NsWowConfig>({
   locale: 'de',
   settings: {
-    languages: ['de', 'en'],
+    languages: ['de'],
     defaultLanguage: 'de',
     shortBreadcrumb: false,
     search: {
@@ -74,7 +75,7 @@ async function setConfig(): Promise<Ref<NsWowConfig>> {
 
     const path = `/src/locales/${locale}.json`;
     if (defaultMessages[path]) {
-      config.value.translations[locale] = Object.assign(
+      config.value.translations[locale] = objectDeepAssign(
         defaultMessages[path],
         config.value.translations[locale],
       );
@@ -88,7 +89,7 @@ async function loadSettings() {
   try {
     const response: Response = await fetch(file);
     const data: NsWowSettings = await response.json();
-    config.value.settings = Object.assign(config.value.settings, data);
+    config.value.settings = objectDeepAssign(config.value.settings, data);
     config.value.locale = data.defaultLanguage;
     document.documentElement.lang = data.defaultLanguage;
   } catch (e) {

package/srl/.srl/composables/index.ts

@@ -1,4 +1,5 @@
 import _instance from './instance';
+import _useSrlConfig from './srlConfig'
 import _useArticle from './article';
 import _useArticles from './articles';
 import _useConfig from './config';
@@ -12,6 +13,7 @@ import _useLanguageSwitch from './languageSwitch';
 import * as cssStyles from './cssStyles.ts'
 
 export const setInstance = _instance.setInstance;
+export const useSrlConfig = _useSrlConfig;
 export const useInstance = _instance.useInstance;
 export const useArticle = _useArticle;
 export const useArticles = _useArticles;
@@ -29,6 +31,7 @@ export const useCssStyles = cssStyles.useCssStyles;
 export default {
   setInstance,
   useInstance,
+  useSrlConfig,
   useArticle,
   useArticles,
   useConfig,