@simple-reporting/base 1.0.15 → 1.0.17

package/livingdocs/060.Buttons/020.button/scss/general.scss

@@ -0,0 +1,89 @@
+@use "srl";
+@use "assets/scss/placeholders";
+
+.srl-button {
+  display: flex;
+  gap: srl.spacer-get(100);
+  align-items: center;
+  padding: srl.spacer-get(200);
+  background-color: srl.colors-white-1000();
+  border: 1px solid srl.colors-primary-1000();
+  text-decoration: none;
+  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
+  border-radius: srl.system-size-unit(24);
+  cursor: pointer;
+  @include srl.typography-button-text();
+
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0s;
+  }
+
+  &.srl-has-icon,
+  [class*="-after"] &,
+  .srl-header__meta-navigation &,
+  &[class*="-before"],
+  &[class*="-after"] {
+    padding:  srl.system-size-unit(11) srl.spacer-get(200);
+  }
+
+ [class*="-after"] &,
+  &[class*="-after"] {
+    flex-direction: row-reverse;
+  }
+
+  &[aria-expanded="true"] {
+    border-bottom: none;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &:hover {
+      background-color: srl.colors-primary-1000();
+    //border-color: srl.colors-white-1000();
+    color: srl.colors-white-1000();
+
+    &[aria-expanded="true"] {
+      border-color: srl.colors-primary-1000();
+    }
+
+    .srl-bg-primary-1000 & {
+      border-color: srl.colors-secondary-1000();
+      background-color: srl.colors-secondary-1000();
+    }
+  }
+
+  &:focus {
+    background-color: srl.colors-primary-1000();
+    border-color: srl.colors-primary-1000();
+    color: srl.colors-white-1000();
+
+    .srl-bg-primary-1000 & {
+      background-color: srl.colors-primary-1000();
+      border-color: srl.colors-primary-1000();
+      color: srl.colors-white-1000();
+    }
+  }
+}
+
+.srl-button__icon {
+  display: none;
+
+  [class*="srl-icon-"][class*="-before"] &,
+  [class*="srl-icon-"][class*="-after"] & {
+    display: block;
+    @extend %srl-icon;
+    @extend %srl-icon-mask;
+  }
+
+  .srl-icon-arrow-left-before & {
+    @extend %srl-icon-arrow-left;
+  }
+
+  .srl-icon-arrow-right-after & {
+    @extend %srl-icon-arrow-right;
+  }
+
+  .srl-icon-download-after & {
+    @extend %srl-icon-download;
+  }
+}

package/livingdocs/060.Buttons/020.button/scss/pdf.scss

@@ -0,0 +1 @@
+@use "srl";

package/livingdocs/060.Buttons/020.button/scss/web.scss

@@ -0,0 +1 @@
+@use "srl";

package/livingdocs/060.Buttons/020.button/scss/word.scss

@@ -0,0 +1 @@
+@use "pdf";

package/livingdocs/060.Buttons/020.button/scss/xbrl.scss

@@ -0,0 +1,3 @@
+@use "srl";
+@use "general";
+      

package/livingdocs/090.Signatures/010.signature-container/scss/web.scss

@@ -3,4 +3,5 @@
 .srl-signature__content {
   display: grid;
   grid-template-columns: subgrid;
+  row-gap: srl.spacer-get(300);
 }

package/livingdocs/110.PDF/040.pdf-chapter-title/scss/editor.scss

@@ -2,12 +2,6 @@
 @use "web";
 @use 'assets/scss/placeholders';
 
-.srl-pdf-chapter-title {
-  border-bottom: 1px solid #{srl.colors-primary-1000()};
-  @include srl.spacer-padding-block(200);
-  @extend %srl-grid-base;
-}
-
 .srl-pdf-chapter-title__text {
   @extend %srl-regular-width;
 }

package/livingdocs/999.Properties/hide-quote-characters/properties.json

@@ -2,6 +2,6 @@
   "hide-quote-characters": {
     "label": "Hide quote characters before and after",
     "type": "option",
-    "value": "hide-quote-characters"
+    "value": "srl-hide-quote-characters"
   }
 }

package/livingdocs/999.Properties/icon/properties.json

@@ -0,0 +1,19 @@
+{
+  "icon": {
+    "label": "Icon",
+    "type": "select",
+    "options": [
+      {
+        "caption": "None"
+      },
+      {
+        "caption": "Arrow right",
+        "value": "srl-icon-arrow-right-after"
+      },
+      {
+        "caption": "Download",
+        "value": "srl-icon-download-after"
+      }
+    ]
+  }
+}

package/livingdocs/999.Properties/reverse/properties.json

@@ -0,0 +1,7 @@
+{
+  "reverse": {
+    "label": "Reverse",
+    "type": "option",
+    "value": "srl-reverse"
+  }
+}

package/package.json

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

package/plugins/viteSrlPlugin.d.ts

@@ -1,2 +1,6 @@
 import type { Plugin } from 'vite';
-declare function viteSrlPlugin(): Plugin;
+
+declare function viteSrlPlugin(): Plugin;
+
+export default viteSrlPlugin;
+export { viteSrlPlugin };

package/plugins/viteSrlPlugin.js

@@ -125,7 +125,7 @@ function triggerAction(callback) {
   }, 200);
 }
 
-export default function viteSrlPlugin() {
+function viteSrlPlugin() {
   return {
     name: 'vite-srl-plugin',
     config(config) {
@@ -137,6 +137,7 @@ export default function viteSrlPlugin() {
       config.resolve.alias = config.resolve.alias || {};
       config.resolve.alias['~'] = folders.root;
       config.resolve.alias['@'] = folders.srlSrc;
+      config.resolve.alias['#srl'] = folders.srlRoot;
       config.resolve.alias['#components'] = folders.srlComponents;
       config.resolve.alias['#composables'] = folders.srlComposables;
       config.resolve.alias['#plugins'] = folders.srlPlugins;
@@ -199,7 +200,7 @@ export default function viteSrlPlugin() {
         }
 
         if (
-          path.includes('src/components/Srl') &&
+          path.includes('src/components/') &&
           path.endsWith('.vue')
         ) {
           triggerAction(vueComponents);
@@ -241,7 +242,7 @@ export default function viteSrlPlugin() {
         }
 
         if (
-          path.includes('src/components/Srl') &&
+          path.includes('src/components/') &&
           path.endsWith('.vue')
         ) {
           triggerAction(vueComponents);
@@ -250,3 +251,6 @@ export default function viteSrlPlugin() {
     },
   };
 }
+
+export default viteSrlPlugin;
+export { viteSrlPlugin };

package/scripts/build.js

@@ -1,4 +1,4 @@
-import { join } from 'node:path/posix';
+import { join, relative } from 'node:path/posix';
 import {
   statSync,
   writeFileSync,
@@ -243,6 +243,7 @@ async function zipApp() {
 async function zipLdd() {
   console.log("\n\nCreate zip file for LDD");
   await checkFolders();
+
   const archiver = require('archiver');
   const output = createWriteStream(join(outputPath, 'design.zip'));
   const archive = archiver('zip', {
@@ -455,21 +456,6 @@ async function buildLdd(version) {
                 }
               }
             },
-            resolve: {
-              alias: {
-                '~': folders.root,
-                '@': folders.srlSrc,
-                '#components': folders.srlComponents,
-                '#composables': folders.srlComposables,
-                '#plugins': folders.srlPlugins,
-                '#types': folders.srlTypes,
-                '#utils': folders.srlUtils,
-                '#imports': folders.srlImports,
-                '#ldd': folders.packageLd,
-                'assets': folders.srlAssets,
-                'srl': folders.srlSystem,
-              },
-            },
             publicDir: false,
           })
         }
@@ -484,6 +470,7 @@ async function buildLdd(version) {
           join(folders.root, 'livingdocs.config.json'),
           join(folders.srlOutput, 'ldd', 'design.json'),
         );
+        buildPdfCustomer()
       });
   } catch (e) {
     console.error(e);
@@ -491,6 +478,121 @@ async function buildLdd(version) {
   }
 }
 
+async function buildPdfCustomer() {
+  const lddPdfDir = join(folders.srlOutput, 'ldd', 'pdf');
+  const lddJson = await readLivingDocsJson();
+
+  try {
+    const pdfDir = join(folders.srlOutput, 'pdf');
+    statSync(pdfDir);
+    await cpSync(pdfDir, lddPdfDir, { recursive: true });
+    console.log('PDF folder has been copied to ' + lddPdfDir);
+  } catch (e) {
+    console.error(e)
+  }
+
+  try {
+    const customerDir = join(folders.root, 'pdf', 'customers');
+    statSync(customerDir);
+    const customerFolders = readdirSync(customerDir, { withFileTypes: true })
+      .filter(dirent => dirent.isDirectory())
+      .map(dirent => dirent.name);
+
+    try {
+      for (let i = 0; i < customerFolders.length; i++) {
+        const customer = customerFolders[i];
+        const customerFolder = join(customerDir, customer);
+        const customerTarget = join(lddPdfDir, customer);
+
+        const jsReferences = [
+          'pdf.js'
+        ];
+        const cssReferences = [
+          'pdf.css'
+        ];
+
+        try {
+          const scssPath = join(customerFolder, 'custom.ts');
+          statSync(scssPath);
+          const config = {
+            css: {
+              preprocessorOptions: {
+                scss: {
+                  api: 'modern-compiler',
+                },
+              },
+            },
+            base: './',
+            build: {
+              outDir: customerTarget,
+              lib: {
+                fileName: 'custom',
+                entry: scssPath,
+                formats: ['es'],
+              },
+            },
+            publicDir: false,
+          };
+          await viteBuild(config)
+
+          try {
+            statSync(join(customerTarget, 'custom.js'));
+            jsReferences.push(`${customer}/custom.js`);
+          } catch (e) {}
+
+          try {
+            statSync(join(customerTarget, 'custom.css'));
+            cssReferences.push(`${customer}/custom.css`);
+          } catch (e) {}
+
+
+        } catch (e) {}
+
+        const files = await glob(join(customerFolder, '**', '*'), { withFileTypes: true });
+        for (const file of files) {
+          if (file.isFile()) {
+            if (!file.name.endsWith('.scss') && !file.name.endsWith('.ts') && !file.name.endsWith('.tsx')) {
+              const from = file.fullpath();
+              const to = join(customerTarget, relative(customerFolder, file.fullpath()));
+              await cpSync(from, to);
+              console.log(`Copy /${relative(folders.root, from)} to /${relative(folders.root, to)}`);
+            }
+            if (file.name.endsWith('.css')) {
+              cssReferences.push(`${relative(customerDir, file.fullpath())}`);
+            }
+            if (file.name.endsWith('.js')) {
+              jsReferences.push(`${relative(customerDir, file.fullpath())}`);
+            }
+          }
+        }
+
+        const ns = `${nsWowInternalLddUrl}/${lddJson.name}/${lddJson.version}/pdf`;
+
+        const pdfConfig = [
+          '<configuration xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">'
+        ];
+        cssReferences.forEach( p => {
+          pdfConfig.push(`  <userStyleSheets><uri>${ns}/${p}</uri></userStyleSheets>`);
+        })
+
+        jsReferences.forEach( p => {
+          pdfConfig.push(`  <userScripts><uri>${ns}/${p}</uri></userScripts>`);
+        })
+
+        pdfConfig.push(`</configuration>`);
+
+        const pdfConfigPath = join(customerTarget, 'pdf-configuration.xml');
+        await writeFileSync(pdfConfigPath, pdfConfig.join('\n'));
+        console.log(`Create PDF configuration file /${relative(folders.root, pdfConfigPath)}`);
+      }
+    } catch (e) {
+      console.error(e)
+    }
+  } catch (e) {}
+
+  return true;
+}
+
 /**
  * Builds the word document by compiling the HTML file using Vite and
  * returns the result.
@@ -501,7 +603,6 @@ async function buildLdd(version) {
 async function buildWord() {
   console.log("\n\nBuild Word");
   await checkFolders();
-  let configFile = false;
 
   const config = {
     css: {

package/scripts/ldd/mapLdd.js

@@ -184,8 +184,8 @@ async function mapComponents(lddJson) {
 
   // write async components
   const asyncComponents = [
-    `import { defineAsyncComponent } from 'vue'`,
-    `export default function asyncLdComponent(app) {`,
+    `import { defineAsyncComponent, type App } from 'vue'`,
+    `export default function asyncLdComponent(app: App): void {`,
   ];
 
   for (let i = 0; i < vueComponents.length; i++) {

package/scripts/vue/components.js

@@ -7,7 +7,6 @@ function toPascalAfterSlash(str) {
 }
 function readVueDir(entryPath, prefix = '') {
   const componentsPath = join(entryPath, 'components');
-  const baseDir = join(componentsPath, 'Srl');
   const result = {};
 
   function search(dir) {
@@ -29,47 +28,47 @@ function readVueDir(entryPath, prefix = '') {
     }
   }
 
-  if (existsSync(baseDir) && statSync(baseDir).isDirectory()) {
-    search(baseDir);
+  if (existsSync(componentsPath) && statSync(componentsPath).isDirectory()) {
+    search(componentsPath);
   }
 
   return result;
 }
 
 export async function vueComponents() {
-  const srlComponents = readVueDir(folders.srlRoot, '#');
   const appComponents = readVueDir(folders.srlSrc, '@/');
+  const srlComponents = readVueDir(folders.srlRoot, '#');
 
   const components = []
   const types = []
 
-  for (const [name, info] of Object.entries(srlComponents)) {
-    const componentPath = appComponents[name] ? appComponents[name].component : info.component
-    const typePath = appComponents[name] ? appComponents[name].type : info.type
+  for (const [name, info] of Object.entries(appComponents)) {
     components.push(
-      `app.component('${name}', defineAsyncComponent(() => import('${componentPath}')));`,
+      `app.component('${name}', defineAsyncComponent(() => import('${info.component}')));`,
     )
     types.push({
       name: name,
-      type: `  type ${name} = typeof import('${typePath}')['default'];`,
+      type: `  type ${name} = typeof import('${info.type}')['default'];`,
     })
   }
 
-  for (const [name, info] of Object.entries(appComponents)) {
-    if (!srlComponents[name]) {
+  for (const [name, info] of Object.entries(srlComponents)) {
+    const componentPath = appComponents[name] ? appComponents[name].component : info.component
+    const typePath = appComponents[name] ? appComponents[name].type : info.type
+    if (!appComponents[name]) {
       components.push(
-        `app.component('${name}', defineAsyncComponent(() => import('${info.component}')));`,
+        `app.component('${name}', defineAsyncComponent(() => import('${componentPath}')));`,
       )
       types.push({
         name: name,
-        type: `  type ${name} = typeof import('${info.type}')['default'];`,
+        type: `  type ${name} = typeof import('${typePath}')['default'];`,
       })
     }
   }
 
   writeFileSync(join(folders.srlPlugins, 'asyncSrlComponents.ts'),
-`import { defineAsyncComponent } from 'vue';
-export default function asyncSrlComponents(app) {
+`import { defineAsyncComponent, type App } from 'vue';
+export default function asyncSrlComponents(app: App): void {
   ${components.join('\n  ')}
 }
 `, 'utf8');

package/srl/components/Srl/{Note → Category}/Accordion/Content.vue

@@ -57,7 +57,13 @@ onMounted(() => {
 </script>
 
 <template>
-<div ref="rootEl" :id="props.accordion.id" :hidden="!props.accordion.state">
+<div
+  ref="rootEl"
+  :id="props.accordion.id"
+  :hidden="!props.accordion.state"
+  tabindex="-1"
+  @keydown.esc.stop.prevent="accordion.close()"
+>
   <slot/>
 </div>
 </template>

package/srl/components/Srl/{Note → Category}/Accordion.vue

@@ -12,11 +12,12 @@ function toggle() {
 
 function open() {
   state.value = true
-  rootEl.value.querySelector<HTMLDivElement>(`#${id.value}`)?.focus()
+  rootEl.value?.querySelector<HTMLDivElement>(`#${id.value}`)?.focus()
 }
 
 function close() {
   state.value = false
+  rootEl.value?.querySelector<HTMLDivElement>(`[aria-controls="${id.value}"]`)?.focus()
 }
 
 const accordion = computed(() => {

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

@@ -167,11 +167,12 @@ const classListItem = computed(() => {
 </script>
 
 <template>
-  <li v-if="!item.children && props.item.href" :class="classListLi">
+  <li v-if="!item.children && props.item.href" role="none" :class="classListLi">
     <router-link
       v-if="!external"
       ref="$el"
       tabindex="-1"
+      role="menuitem"
       :to="props.item.href"
       :class="classListItem"
       :title="props.item.title ?? props.item.label"
@@ -195,6 +196,7 @@ const classListItem = computed(() => {
       v-else
       tabindex="-1"
       ref="$el"
+      role="menuitem"
       :href="props.item.href"
       :title="props.item.title ?? props.item.label"
       :class="classListItem"
@@ -217,11 +219,12 @@ const classListItem = computed(() => {
       />
     </a>
   </li>
-  <li v-else-if="props.item.callback" :class="classListLi">
+  <li v-else-if="props.item.callback" role="none" :class="classListLi">
     <button
       type="button"
       ref="$el"
       tabindex="-1"
+      role="menuitem"
       :class="classListItem"
       :title="props.item.title ?? props.item.label"
       :aria-label="props.item.icon ? props.item.title ?? props.item.label : undefined"
@@ -242,11 +245,12 @@ const classListItem = computed(() => {
       />
     </button>
   </li>
-  <li v-else :class="classListLi">
+  <li v-else :class="classListLi" role="none">
     <button
       type="button"
       ref="$el"
       tabindex="-1"
+      role="menuitem"
       :aria-haspopup="props.item.children ? 'true' : 'false'"
       :aria-expanded="opened"
       :aria-controls="`${props.name}-${id}`"

package/srl/components/Srl/Menu.vue

@@ -167,7 +167,7 @@ function routerChange() {
 }
 
 function closeAll(keep?: number | string) {
-  items.value.forEach((item: typeof MenuItem, index: number) => {
+  items.value.forEach((item: SrlMenuItem, index: number) => {
     if (keep !== index) item.closeItem()
   })
 }
@@ -236,6 +236,7 @@ defineExpose({
   <ul
     ref="$el"
     tabindex="0"
+    :role="props.depth === 0 ? 'menubar' : 'menu'"
     :id="props.id"
     :class="classList"
     :hidden="!opened"

package/srl/composables/config.ts

@@ -61,11 +61,6 @@ async function setConfig(): Promise<Ref<NsWowConfig>> {
   await loadSettings();
   await loadTranslations();
 
-  const defaultMessages = import.meta.glob('@/locales/*.json', {
-    eager: true,
-    import: 'default',
-  });
-
   for (const locale of config.value.settings.languages) {
     await loadRouting(locale);
     await loadDownloads(locale);
@@ -97,7 +92,8 @@ async function loadSettings() {
     config.value.locale = data.defaultLanguage;
     document.documentElement.lang = data.defaultLanguage;
   } catch (e) {
-    errorLog(`"${file}" could not be loaded.`, e);
+    const o = e as Error;
+    errorLog(`"${file}" could not be loaded.`, o);
   }
 }
 
@@ -105,10 +101,10 @@ async function loadTranslations() {
   const file = `./json/translations_hosting.json`;
   try {
     const response: Response = await fetch(file);
-    const data: NsWowTranslations = await response.json();
-    config.value.translations = data;
+    config.value.translations = await response.json() as NsWowTranslations;
   } catch (e) {
-    errorLog(`"${file}" could not be loaded.`, e);
+    const o = e as Error;
+    errorLog(`"${file}" could not be loaded.`, o);
   }
 }
 
@@ -120,19 +116,22 @@ async function loadRouting(locale: string) {
     config.value.articles[locale] = routing.pages;
     config.value.menus[locale] = routing.menu;
   } catch (e) {
-    errorLog(`"${file}" could not be loaded.`, e);
+    const o = e as Error;
+    errorLog(`"${file}" could not be loaded.`, o);
   }
 }
 
 async function loadDownloads(locale: string) {
-  config.value.downloads[locale] = {};
+  config.value.downloads[locale] = {
+    structure: [],
+  };
   const file: string = `./downloads/downloads_${locale}.json`;
   try {
     const response: Response = await fetch(file);
-    const data = await response.json();
-    config.value.downloads[locale] = data;
+    config.value.downloads[locale] = await response.json();
   } catch (e) {
-    errorLog(`"${file}" could not be loaded.`, e);
+    const o = e as Error;
+    errorLog(`"${file}" could not be loaded.`, o);
   }
 }
 

package/srl/composables/cssStyles.ts

@@ -6,7 +6,7 @@ export function addCssStyles(cssString: string): void {
   cssStyles.value.includes(cssString) || cssStyles.value.push(cssString);
 }
 
-export function useCssStyles(): string[] {
+export function useCssStyles(): typeof cssStyles {
   return cssStyles;
 }
 

package/srl/composables/menu.ts

@@ -35,8 +35,12 @@ import {
 import { isRouterPath } from '#utils/uri';
 import useConfig from './config';
 
+type Menus = {
+  [key: string]: ComputedRef<NsWowNavigationItem[]>;
+}
+
 const config = useConfig();
-const menus = {};
+const menus: Menus = {};
 
 function buildNav(
   item: NsWowMenu,