@simple-reporting/base 1.0.28 → 1.0.30

package/dev/package.json

@@ -24,7 +24,7 @@
     "postinstall": "srl prepare"
   },
   "dependencies": {
-    "@simple-reporting/base": "^1.0.28",
+    "@simple-reporting/base": "^1.0.30",
     "axios": "^1.12.2",
     "chalk": "^5.6.2",
     "exceljs": "^4.4.0",

package/livingdocs/020.Text/050.quote/quote.html

@@ -3,13 +3,13 @@
     <p class="srl-quote__quote srl-linkable" doc-editable="quote-text">
       Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
     </p>
-    <cite class="srl-quote__cite">
-      <p class="srl-quote__name" doc-editable="quote-name" doc-optional>
+    <p class="srl-quote__cite">
+      <cite class="srl-quote__name" doc-editable="quote-name" doc-optional>
         Max Mustermann
-      </p>
-      <p class="srl-quote__position" doc-editable="quote-position" doc-optional>
+      </cite>
+      <span class="srl-quote__position" doc-editable="quote-position" doc-optional>
         CEO
-      </p>
-    </cite>
+      </span>
+    </p>
   </div>
 </blockquote>

package/livingdocs/020.Text/060.quote-with-portrait/quote-with-portrait.html

@@ -6,13 +6,13 @@
     <p class="srl-quote__quote srl-linkable" doc-editable="quote-text">
       Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
     </p>
-    <cite class="srl-quote__cite">
-      <p class="srl-quote__name" doc-editable="quote-name" doc-optional>
+    <p class="srl-quote__cite">
+      <cite class="srl-quote__name" doc-editable="quote-name" doc-optional>
         Max Mustermann
-      </p>
-      <p class="srl-quote__position" doc-editable="quote-position" doc-optional>
+      </cite>
+      <span class="srl-quote__position" doc-editable="quote-position" doc-optional>
         CEO
-      </p>
-    </cite>
+      </span>
+    </p>
   </div>
 </blockquote>

package/livingdocs/020.Text/060.quote-with-portrait/scss/pdf.scss

@@ -1,6 +1,11 @@
 @use 'srl';
 
+.srl-quote {
+  align-items: flex-end;
+}
+
 .srl-quote--with-image {
+  align-items: center;
   flex-direction: row;
 }
 

package/livingdocs/040.Media/010.table/scss/general.scss

@@ -270,15 +270,15 @@ td {
     text-align: right;
   }
 
-  &[class*="vertical-top"] {
+  &[class*="vatop"] {
     vertical-align: top;
   }
 
-  &[class*="vertical-middle"] {
+  &[class*="vamiddle"] {
     vertical-align: middle;
   }
 
-  &[class*="vertical-bottom"] {
+  &[class*="vabottom"] {
     vertical-align: bottom;
   }
 

package/livingdocs/040.Media/010.table/table.html

@@ -1,5 +1,5 @@
 <div class="srl-table">
-  <srl-ld-table data-remove-from-xhtml="transient" data-remove-from-pdf="transient">
+  <srl-ld-table data-replace-tag="div" data-remove-from-xhtml="transient" data-remove-from-pdf="transient">
     <div ref="wrapper" class="srl-table__container" doc-include="nswow-table">
       <p class="srl-grid srl-paragraph">
         <span class="srl-grid__inner srl-paragraph__text">

package/livingdocs/110.PDF/050.pdf-chapter-navigation-container/scss/editor.scss

@@ -1,4 +1,5 @@
 @use "web";
+@use "assets/scss/placeholders";
 
 .srl-chapter-navigation__list {
   @extend %srl-regular-width;

package/package.json

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

package/plugins/viteSrlPlugin.js

@@ -1,5 +1,5 @@
 import { existsSync, readFileSync, writeFileSync } from 'node:fs';
-import { join, relative } from 'node:path/posix';
+import { join } from 'node:path/posix';
 import { execSync } from 'node:child_process';
 import folders from '../scripts/folders.js';
 import { beaver } from '../scripts/beaver.js';
@@ -77,11 +77,17 @@ function checkForUpdates() {
   try {
     if (!data.version) return;
 
+    /*
     const tag = `v${data.version.split('.')[0]}-lts`;
 
     const latest = execSync(`npm view ${packageName}@${tag} version`)
       .toString()
       .trim();
+     */
+
+    const latest = execSync(`npm view ${packageName} version`)
+      .toString()
+      .trim();
 
     if (isVersionGreater(latest, data.version)) {
       printPromptsMessage([

package/scripts/build.js

@@ -124,7 +124,7 @@ async function buildApp() {
         return false;
       } else {
         src === join(folders.srlPublic, '/') ||
-          console.log(`Copy ${src} to ${outputPath}/app`);
+        console.log(`Copy ${src} to ${outputPath}/app`);
         return true;
       }
     },
@@ -204,13 +204,12 @@ async function buildDDev() {
   buildVariables.system['size-unit'] = 'rem';
 
   await checkFolders();
-  const build = await viteBuild({
+  return  await viteBuild({
     build: {
       outDir: './.output/ddev',
     },
     publicDir: true,
   });
-  return build;
 }
 
 /**
@@ -527,7 +526,7 @@ async function buildPdfCustomer(customer) {
     console.error(`Customer ${customer} does not exist in: ` + customerDir);
   }
 
-  console.log(`\nBuild PDF for customer ${customer}`);
+  console.log(`\nBuild customer ${customer}`);
 
   const lddPdfDir = join(folders.srlOutput, 'ldd', 'pdf');
   const lddJson = await readLivingDocsJson();
@@ -542,9 +541,10 @@ async function buildPdfCustomer(customer) {
     console.error(e)
   }
 
+  const lddXbrlDir = join(folders.srlOutput, 'ldd', 'xbrl');
+
   try {
     const xbrlDir = join(folders.srlOutput, 'xbrl');
-    const lddXbrlDir = join(folders.srlOutput, 'ldd', 'xbrl');
     statSync(xbrlDir);
     await cpSync(xbrlDir, lddXbrlDir, { recursive: true });
     console.log(`Xbrl folder has been copied to ${relative(folders.root, lddXbrlDir)}`);
@@ -552,6 +552,49 @@ async function buildPdfCustomer(customer) {
     console.error(e)
   }
 
+  try {
+    const customerXbrlScssPath = join(customerDir, 'custom.scss');
+    const customerXbrlTarget = join(lddXbrlDir, customerName);
+    const baseXbrlScssPath = join(folders.srlImports, 'xbrl.scss');
+
+    const entries = [
+      baseXbrlScssPath,
+      customerXbrlScssPath,
+    ];
+
+    buildVariables.system.environment = 'production';
+    buildVariables.system.build = 'xbrl';
+    buildVariables.system['size-unit'] = 'rem';
+
+    const config = {
+      css: {
+        preprocessorOptions: {
+          scss: {
+            api: 'modern-compiler',
+          },
+        },
+      },
+      base: './',
+      build: {
+        outDir: customerXbrlTarget,
+        lib: {
+          fileName: 'xbrl',
+          entry: entries,
+          formats: ['es'],
+        },
+      },
+      publicDir: false,
+    };
+
+    try {
+      statSync(customerXbrlScssPath)
+      await viteBuild(config);
+    } catch (e) {
+      console.error(e);
+    }
+
+  } catch (e) {}
+
   try {
     const pdfDir = join(folders.srlOutput, 'pdf');
     statSync(pdfDir);
@@ -574,6 +617,10 @@ async function buildPdfCustomer(customer) {
       const tsPath = join(customerDir, 'custom.ts');
       statSync(tsPath);
 
+      buildVariables.system.environment = 'production';
+      buildVariables.system.build = 'pdf';
+      buildVariables.system['size-unit'] = 'rem';
+
       const config = {
         css: {
           preprocessorOptions: {
@@ -761,16 +808,16 @@ async function build(version, options = {}) {
     const has = (name) => targets.includes(name);
 
     if (has('ldd')) {
-        if (!version) {
-          const prompt = new Input({
-            message: 'Livingdocs version',
-            initial: packageJson.version,
-          });
-          version = await prompt.run();
-        }
+      if (!version) {
+        const prompt = new Input({
+          message: 'Livingdocs version',
+          initial: packageJson.version,
+        });
+        version = await prompt.run();
+      }
 
-        packageJson.version = version;
-        await writePackageJson();
+      packageJson.version = version;
+      await writePackageJson();
     }
 
 
@@ -1015,33 +1062,33 @@ async function mapScss() {
     await writeFileSync(
       join(folders.srlImports, 'app.scss'),
       `@use ` +
-        output.app.join(';\n@use ') +
-        `;\n@use "@simple-reporting/base/scss/core-styles.scss" as *;\n`,
+      output.app.join(';\n@use ') +
+      `;\n@use "@simple-reporting/base/scss/core-styles.scss" as *;\n`,
     );
     await writeFileSync(
       join(folders.srlImports, 'ldd.scss'),
       `@use ` +
-        output.ldd.join(';\n@use ') +
-        `;\n@use "@simple-reporting/base/scss/core-styles.scss" as *;\n`,
+      output.ldd.join(';\n@use ') +
+      `;\n@use "@simple-reporting/base/scss/core-styles.scss" as *;\n`,
     );
     await writeFileSync(
       join(folders.srlImports, 'pdf.scss'),
       `@use ` +
-        output.pdf.join(';\n@use ') +
-        `;\n@use "@simple-reporting/base/scss/core-styles.scss" as *;\n`,
+      output.pdf.join(';\n@use ') +
+      `;\n@use "@simple-reporting/base/scss/core-styles.scss" as *;\n`,
     );
     await writeFileSync(
       join(folders.srlImports, 'word.scss'),
       `@use ` +
-        output.word.join(';\n@use ') +
-        `;\n@use "@simple-reporting/base/scss/core-styles.scss" as *;\n`,
+      output.word.join(';\n@use ') +
+      `;\n@use "@simple-reporting/base/scss/core-styles.scss" as *;\n`,
     );
 
     await writeFileSync(
       join(folders.srlImports, 'xbrl.scss'),
       `@use ` +
-        output.xbrl.join(`;\n@use `) +
-        `;\n@use "@simple-reporting/base/scss/xbrl-core-styles.scss" as *;\n`,
+      output.xbrl.join(`;\n@use `) +
+      `;\n@use "@simple-reporting/base/scss/xbrl-core-styles.scss" as *;\n`,
     );
 
     return true;

package/scss/grid/root.scss

@@ -2,7 +2,21 @@
 @use "../system";
 @use "sass:map";
 
+$smallest-breakpoint: null;
+
+@each $breakpoint, $min-width in variables.$breakpoints {
+  @if $min-width == 0 {
+    $smallest-breakpoint: $breakpoint;
+  }
+}
+
 @each $breakpoint, $min-width in variables.$breakpoints {
+  $breakpoint-map: $breakpoint;
+
+  @if $breakpoint == $smallest-breakpoint {
+    $breakpoint-map: false;
+  }
+
   $size-unit: false;
   @if $breakpoint == print {
     $size-unit: in;
@@ -23,7 +37,7 @@
   @include system.add-root-style(
                   #{variables.$variable-prefix}container-max-width,
                   system.size-unit($container-max-width, $size-unit),
-                  $breakpoint
+                  $breakpoint-map
   );
 
   $container-padding: map.get($container, padding);
@@ -34,7 +48,7 @@
   @include system.add-root-style(
                   #{variables.$variable-prefix}container-padding,
                   system.size-unit($container-padding, $size-unit),
-                  $breakpoint
+                  $breakpoint-map
   );
 
   $gutter: map.get(variables.$gutter, $breakpoint);
@@ -64,17 +78,17 @@
   @include system.add-root-style(
                   #{variables.$variable-prefix}gutter-columns,
                   $columns,
-                  $breakpoint
+                  $breakpoint-map
   );
   @include system.add-root-style(
                   #{variables.$variable-prefix}gutter-row-gap,
                   system.size-unit($row-gap, $size-unit),
-                  $breakpoint
+                  $breakpoint-map
   );
 
   @include system.add-root-style(
                   #{variables.$variable-prefix}gutter-column-gap,
                   system.size-unit($column-gap, $size-unit),
-                  $breakpoint
+                  $breakpoint-map
   );
 }

package/srl/.srl/components/Srl/Menu/Item/Content/Image/After.vue

@@ -26,7 +26,7 @@ const classListText = computed(() => {
   <span :class="classListText" v-text="props.item.label"/>
   <img
     :class="classListIcon"
-    :src="props.item.imgAfter.src"
-    :alt="props.item.imgAfter.alt ?? props.item.label"
+    :src="props.item.imgAfter?.src"
+    :alt="props.item.imgAfter?.alt ?? props.item.label"
   />
 </template>

package/srl/.srl/components/Srl/Menu/Item/Content/Image/Before.vue

@@ -25,8 +25,8 @@ const classListText = computed(() => {
 <template>
   <img
     :class="classListIcon"
-    :src="props.item.imgBefore.src"
-    :alt="props.item.imgBefore.alt ?? props.item.label"
+    :src="props.item.imgBefore?.src"
+    :alt="props.item.imgBefore?.alt ?? props.item.label"
   />
   <span :class="classListText" v-text="props.item.label"/>
 </template>

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

@@ -18,7 +18,7 @@ const classListIcon = computed(() => {
 <template>
   <img
     :class="classListIcon"
-    :src="props.item.img.src"
-    :alt="props.item.img.alt ?? props.item.label"
+    :src="props.item.img?.src"
+    :alt="props.item.img?.alt ?? props.item.label"
   />
 </template>

package/srl/.srl/components/Srl/Menu/Item/Content/Svg/After.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref, watch, computed, h, type VNode } from 'vue'
+
+const props = defineProps<{
+  item: NsWowNavigationItem
+  depth: number
+  disableClasses: boolean
+}>();
+
+const classListIcon = computed(() => {
+  return props.disableClasses ? [] : [
+    'srl-menu__link-svg-after',
+    `srl-menu__link-svg-after--level-${props.depth}`
+  ]
+})
+
+const svgVNode = ref<VNode | null>(null)
+
+watch(
+  props,
+  async (to) => {
+    if (typeof to.item.svgAfter === 'string') {
+      let icon
+      if (to.item.svgAfter.startsWith('data:image/svg+xml,')) {
+        icon = decodeURIComponent(to.item.svgAfter.replace('data:image/svg+xml,', ''))
+      } else if (!to.item.svgAfter.startsWith('<svg')) {
+        try {
+          const res = await fetch(to.item.svgAfter)
+          if (!res.ok) {
+            svgVNode.value = null
+            return
+          }
+          icon = await res.text()
+        } catch (e) {
+          svgVNode.value = null
+          return
+        }
+      } else {
+        icon = to.item.svgAfter
+      }
+
+      if (!icon) {
+        svgVNode.value = null
+        return
+      }
+      const parser = new DOMParser()
+      const doc = parser.parseFromString(icon, 'image/svg+xml')
+      const svg = doc.querySelector('svg')
+      if (!svg) {
+        svgVNode.value = null
+        return
+      }
+
+      const attrs = Object.fromEntries([...svg.attributes].map(attr => [attr.name, attr.value]))
+
+      svgVNode.value = h('svg', {
+        innerHTML: svg.innerHTML,
+        ...attrs
+      })
+    } else {
+      svgVNode.value = null
+    }
+  },
+  { immediate: true }
+)
+
+const classListText = computed(() => {
+  return props.disableClasses ? [] : [
+    'srl-menu__link-text',
+    `srl-menu__link-text--level-${props.depth}`
+  ]
+})
+</script>
+
+<template>
+  <span :class="classListText" v-text="props.item.label"/>
+  <component :is="svgVNode" v-if="svgVNode" :class="classListIcon" />
+  <component :is="props.item.svgAfter" v-if="typeof props.item.svgAfter === 'object'" :class="classListIcon" />
+</template>

package/srl/.srl/components/Srl/Menu/Item/Content/Svg/Before.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref, watch, computed, h, type VNode } from 'vue'
+
+const props = defineProps<{
+  item: NsWowNavigationItem
+  depth: number
+  disableClasses: boolean
+}>();
+
+const classListIcon = computed(() => {
+  return props.disableClasses ? [] : [
+    'srl-menu__link-svg-before',
+    `srl-menu__link-svg-before--level-${props.depth}`
+  ]
+})
+
+const svgVNode = ref<VNode | null>(null)
+
+watch(
+  props,
+  async (to) => {
+    if (typeof to.item.svgBefore === 'string') {
+      let icon
+      if (to.item.svgBefore.startsWith('data:image/svg+xml,')) {
+        icon = decodeURIComponent(to.item.svgBefore.replace('data:image/svg+xml,', ''))
+      } else if (!to.item.svgBefore.startsWith('<svg')) {
+        try {
+          const res = await fetch(to.item.svgBefore)
+          if (!res.ok) {
+            svgVNode.value = null
+            return
+          }
+          icon = await res.text()
+        } catch (e) {
+          svgVNode.value = null
+          return
+        }
+      } else {
+        icon = to.item.svgBefore
+      }
+
+      if (!icon) {
+        svgVNode.value = null
+        return
+      }
+      const parser = new DOMParser()
+      const doc = parser.parseFromString(icon, 'image/svg+xml')
+      const svg = doc.querySelector('svg')
+      if (!svg) {
+        svgVNode.value = null
+        return
+      }
+
+      const attrs = Object.fromEntries([...svg.attributes].map(attr => [attr.name, attr.value]))
+
+      svgVNode.value = h('svg', {
+        innerHTML: svg.innerHTML,
+        ...attrs
+      })
+    } else {
+      svgVNode.value = null
+    }
+  },
+  { immediate: true }
+)
+
+const classListText = computed(() => {
+  return props.disableClasses ? [] : [
+    'srl-menu__link-text',
+    `srl-menu__link-text--level-${props.depth}`
+  ]
+})
+</script>
+
+<template>
+  <component :is="svgVNode" v-if="svgVNode" :class="classListIcon" />
+  <component :is="props.item.svgBefore" v-else-if="typeof props.item.svgBefore === 'object'" :class="classListIcon" />
+  <span :class="classListText" v-text="props.item.label"/>
+</template>

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

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { ref, watch, computed, h, type VNode } from 'vue'
+
+const props = defineProps<{
+  item: NsWowNavigationItem
+  depth: number
+  disableClasses: boolean
+}>();
+
+const classListIcon = computed(() => {
+  return props.disableClasses ? [] : [
+    'srl-menu__link-svg',
+    `srl-menu__link-svg--level-${props.depth}`
+  ]
+})
+
+const svgVNode = ref<VNode | null>(null)
+
+watch(
+  props,
+  async (to) => {
+    if (typeof to.item.svg === 'string') {
+      let icon
+      if (to.item.svg.startsWith('data:image/svg+xml,')) {
+        icon = decodeURIComponent(to.item.svg.replace('data:image/svg+xml,', ''))
+      } else if (!to.item.svg.startsWith('<svg')) {
+        try {
+          const res = await fetch(icon)
+          if (!res.ok) {
+            svgVNode.value = null
+            return
+          }
+          icon = await res.text()
+        } catch (e) {
+          svgVNode.value = null
+          return
+        }
+      } else {
+        icon = to.item.svg
+      }
+
+      if (!icon) {
+        svgVNode.value = null
+        return
+      }
+      const parser = new DOMParser()
+      const doc = parser.parseFromString(icon, 'image/svg+xml')
+      const svg = doc.querySelector('svg')
+      if (!svg) {
+        svgVNode.value = null
+        return
+      }
+
+      const attrs = Object.fromEntries([...svg.attributes].map(attr => [attr.name, attr.value]))
+
+      svgVNode.value = h('svg', {
+        innerHTML: svg.innerHTML,
+        ...attrs
+      })
+    } else {
+      svgVNode.value = null
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <component :is="svgVNode" v-if="svgVNode" :class="classListIcon" />
+  <component :is="props.item.svg" v-else-if="typeof props.item.svg === 'object'" :class="classListIcon" />
+</template>

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

@@ -44,6 +44,24 @@ const props = defineProps<{
     :depth="props.depth"
     :disableClasses="props.disableClasses"
   />
+  <SrlMenuItemContentSvg
+    v-else-if="props.item.svg"
+    :item="props.item"
+    :depth="props.depth"
+    :disableClasses="props.disableClasses"
+  />
+  <SrlMenuItemContentSvgBefore
+    v-else-if="props.item.svgBefore"
+    :item="props.item"
+    :depth="props.depth"
+    :disableClasses="props.disableClasses"
+  />
+  <SrlMenuItemContentSvgAfter
+    v-else-if="props.item.svgAfter"
+    :item="props.item"
+    :depth="props.depth"
+    :disableClasses="props.disableClasses"
+  />
   <SrlMenuItemContentText
     v-else
     :item="props.item"

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, nextTick, ref, useId } from 'vue'
+import { computed, nextTick, ref, useId, VNode } from 'vue'
+import type { Ref } from 'vue'
 import type { RouterLink } from 'vue-router'
 import { isExternalPath } from '#utils/uri'
 
@@ -17,6 +18,12 @@ type BackButtonItem = {
     src: string
     alt?: string
   }
+  icon?: string
+  iconBefore?: string
+  iconAfter?: string
+  svg?: VNode | string;
+  svgBefore?: VNode | string;
+  svgAfter?: VNode | string;
   attributes?: {
     [key: string]: string
   }
@@ -31,12 +38,19 @@ const props = defineProps<{
   initOpen: number
   depth: number
   disableClasses: boolean
-  backButonEnabled?: boolean
-  backButtonLabel?: string
-  backButtonItem: BackButtonItem
+  backButtonEnabled: boolean
+  backButtonLabel: (backPath: NsWowNavigationItem[]) => string
+  backButtonItem?: BackButtonItem
+  backPath: NsWowNavigationItem[]
+  path: NsWowNavigationItem[]
 }>()
 
+const breadcrumb = defineModel<NsWowNavigationItem[]>('breadcrumb', {
+  required: true,
+}) as Ref<NsWowNavigationItem[]>
+
 const emit = defineEmits([
+  'toggle',
   'open',
   'close',
   'link',
@@ -51,15 +65,43 @@ if (props.item.children) {
   id.value = useId()
 }
 
+const currentBackPath = computed<NsWowNavigationItem[]>(() => {
+  if (!props.item?.attributes?.class?.includes('srl-menu__link--back')) {
+    const i: NsWowNavigationItem = {
+      label: props.item.label
+    }
+    props.item.title ? i.title = props.item.title : null
+    props.item.img ? i.img = props.item.img : null
+    props.item.imgBefore ? i.imgBefore = props.item.imgBefore : null
+    props.item.imgAfter ? i.imgAfter = props.item.imgAfter : null
+    props.item.icon ? i.icon = props.item.icon : null
+    props.item.iconBefore ? i.iconBefore = props.item.iconBefore : null
+    props.item.iconAfter ? i.iconAfter = props.item.iconAfter : null
+    props.item.svg ? i.svg = props.item.svg : null
+    props.item.svgBefore ? i.svgBefore = props.item.svgBefore : null
+    props.item.svgAfter ? i.svgAfter = props.item.svgAfter : null
+    props.item.attributes ? i.attributes = props.item.attributes : null
+    return [i, ...props.backPath]
+  }
+  return props.backPath
+})
+
+const currentPath = computed<NsWowNavigationItem[]>(() => {
+  return [...props.path, props.item]
+})
+
 const external = ref(props.item.href && isExternalPath(props.item.href))
 
 const menu = ref()
-const $el = ref<HTMLButtonElement | HTMLAnchorElement | typeof RouterLink>()
+const $el = ref<HTMLElement | null>(null)
 const opened = ref(false)
 
-function toggle() {
+
+
+function toggleAction() {
   opened.value = !opened.value
   if (opened.value) {
+    breadcrumb.value = currentPath.value
     emit('open', { index: props.index })
     nextTick(() => {
       menu.value.$el.focus()
@@ -67,13 +109,22 @@ function toggle() {
   } else {
     menu.value.closeAll()
   }
+  toggle()
 }
 function close() {
+  breadcrumb.value = props.path
   emit('close', { index: props.index })
 }
 
 function closeSub() {
-  $el.value?.focus()
+  breadcrumb.value = props.path
+  if ($el.value instanceof HTMLElement) {
+    $el.value.focus()
+  }
+}
+
+function toggle() {
+  emit('toggle')
 }
 
 function next() {
@@ -99,6 +150,7 @@ function back(event: KeyboardEvent) {
     event.preventDefault()
   }
   emit('back')
+  toggle()
 }
 
 function link() {
@@ -113,23 +165,41 @@ function routerChange() {
 }
 
 function closeItem() {
+  !opened.value || toggle()
   opened.value = false
   menu.value?.closeAll()
 }
 
+function findPath(): NsWowNavigationItem[] | null {
+  if (opened.value) {
+    if (props.item?.children?.length) {
+      let res = [...props.path, props.item]
+      menu.value.items.forEach((item) => {
+        item.opened && (res = item.findPath() || res)
+      })
+      return res
+    } else {
+      return currentPath.value
+    }
+  }
+  return null
+}
+
 defineExpose({
+  opened,
   closeItem,
+  findPath,
   $el,
   menu,
 })
 
-function internalLinkClick(event: Event) {
-  !props.item.callback || props.item.callback(event)
+function internalLinkClick() {
+  !props.item.callback || props.item.callback()
   routerChange()
 }
 
-function externalLinkClick(event: Event) {
-  !props.item.callback || props.item.callback(event)
+function externalLinkClick() {
+  !props.item.callback || props.item.callback()
   link()
 }
 
@@ -258,7 +328,7 @@ const classListItem = computed(() => {
       :title="props.item.title ?? props.item.label"
       :aria-label="props.item.icon ? props.item.title ?? props.item.label : undefined"
       v-bind="dynamicAttributes"
-      @click.stop="toggle"
+      @click.stop="toggleAction"
       @keydown.left.stop.prevent="prev"
       @keydown.up.stop.prevent="prev"
       @keydown.down.stop.prevent="next"
@@ -276,6 +346,9 @@ const classListItem = computed(() => {
     <SrlMenu
       v-if="props.item.children"
       ref="menu"
+      :key="id"
+      v-model:opened="opened"
+      v-model:breadcrumb="breadcrumb"
       :id="`${props.name}-${id}`"
       :name="props.name"
       :menu="props.item.children"
@@ -283,14 +356,16 @@ const classListItem = computed(() => {
       :initOpen="props.initOpen"
       :depth="props.depth + 1"
       :disableClasses="props.disableClasses"
-      :backButonEnabled="props.backButonEnabled"
-      :backButtonLabel="props.backButonEnabled ? props.item.label : undefined"
+      :backButtonEnabled="props.backButtonEnabled"
+      :backButtonLabel="props.backButtonLabel"
       :backButtonItem="props.backButtonItem"
-      v-model:opened="opened"
+      :path="currentPath"
+      :backPath="currentBackPath"
       @link="link"
       @routerChange="emit('routerChange')"
       @tab="tab"
       @closeSub="closeSub"
+      @toggle="toggle"
     />
   </li>
 </template>

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

@@ -50,7 +50,7 @@
  *   @link="handleNavigation"
  * />
  */
-import { computed, ref } from 'vue'
+import { computed, ref, VNode } from 'vue'
 
 type BackButtonItem = {
   title?: string
@@ -66,6 +66,12 @@ type BackButtonItem = {
     src: string
     alt?: string
   }
+  icon?: string
+  iconBefore?: string
+  iconAfter?: string
+  svg?: VNode | string;
+  svgBefore?: VNode | string;
+  svgAfter?: VNode | string;
   attributes?: {
     [key: string]: string
   }
@@ -82,9 +88,11 @@ const props = withDefaults(
     singleOpen?: boolean
     depth?: number
     disableClasses?: boolean
-    backButonEnabled?: boolean
+    backButtonEnabled?: boolean
+    backButtonLabel?: (backPath: NsWowNavigationItem[]) => string
     backButtonItem?: BackButtonItem
-    backButtonLabel?: string
+    path?: NsWowNavigationItem[]
+    backPath?: NsWowNavigationItem[]
   }>(),
   {
     disableTab: false,
@@ -93,11 +101,15 @@ const props = withDefaults(
     singleOpen: true,
     depth: 0,
     disableClasses: false,
-    backButtonItem: {}
+    backButtonLabel: function(backPath: NsWowNavigationItem[]) {
+      return backPath[0]?
+        backPath[0]?.label ?? 'Back' : 'Back'
+    },
   },
 )
 
 const emit = defineEmits([
+  'toggle',
   'close',
   'closeSub',
   'link',
@@ -110,6 +122,10 @@ const emit = defineEmits([
 const items = ref<SrlMenuItem[]>([])
 
 const opened = defineModel('opened', { type: Boolean, default: true })
+const breadcrumb = defineModel('breadcrumb', {
+  type: Array,
+  default: [],
+})
 
 function open(event: { index: number }) {
   if (props.singleOpen) {
@@ -124,6 +140,7 @@ function close() {
   } else {
     emit('close')
   }
+  toggle()
 }
 
 function next(event: { index: number }) {
@@ -166,10 +183,27 @@ function routerChange() {
   emit('routerChange')
 }
 
+function toggle() {
+  emit('toggle')
+}
+
 function closeAll(keep?: number | string) {
+  let findCurrentPath = null
   items.value.forEach((item: SrlMenuItem, index: number) => {
-    if (keep !== index) item.closeItem()
+    if (keep !== index) {
+      item.closeItem()
+    }
+      const currentPath = item.findPath()
+      if (currentPath) {
+        findCurrentPath = currentPath
+      }
   })
+  if (findCurrentPath) {
+    breadcrumb.value = findCurrentPath
+  } else {
+    breadcrumb.value = props.path && props.path.length ?
+      props.path.slice(0, -1) : []
+  }
 }
 
 const $el = ref<HTMLUListElement>()
@@ -186,36 +220,44 @@ function focusClickable(index: number) {
 
 const menuItems = computed<NsWowNavigationItem[]>(() => {
   const classes: string[] = []
-  if (props.backButtonItem?.attributes?.class) {
-    props.backButtonItem.attributes.class.split(' ').forEach(c => {
-      classes.push(c)
+  const backButtonAttributes = props.backButtonItem?.attributes
+  if (backButtonAttributes && backButtonAttributes.class.length > 0) {
+    backButtonAttributes.class.split(' ').forEach(c => {
+      if (c) classes.push(c)
     })
   }
   classes.push('srl-menu__link--back')
-  return props.backButonEnabled && props.depth ? [
-      {
-        label: props.backButtonLabel,
-        title: props.backButtonItem.title,
-        img: props.backButtonItem.img,
-        imgBefore: props.backButtonItem.imgBefore,
-        imgAfter: props.backButtonItem.imgAfter,
-        attributes: props.backButtonItem.attributes ?
-          Object.assign(props.backButtonItem.attributes,
-            {
-              'class': classes.join(' '),
-              'aria-controls': props.id,
-              'aria-expanded': opened.value
-            }
-          ):
-          {
-            'class': classes.join(' '),
-            'aria-controls': props.id,
-            'aria-expanded': opened.value
-          },
-        callback: close,
-      },
-      ...props.menu,
-    ] : props.menu
+
+  let backLabel: string = props.backButtonLabel(props.backPath ?? [])
+
+  if
+    (props.backButtonEnabled &&
+    props.depth &&
+    props.backButtonItem
+  ) {
+    const backItem: NsWowNavigationItem = {
+      label: backLabel,
+    }
+    props.backButtonItem.title ? backItem.title = props.backButtonItem.title : null
+    props.backButtonItem.img ? backItem.img = props.backButtonItem.img : null
+    props.backButtonItem.imgBefore ? backItem.imgBefore = props.backButtonItem.imgBefore : null
+    props.backButtonItem.imgAfter ? backItem.imgAfter = props.backButtonItem.imgAfter : null
+    props.backButtonItem.icon ? backItem.icon = props.backButtonItem.icon : null
+    props.backButtonItem.iconBefore ? backItem.iconBefore = props.backButtonItem.iconBefore : null
+    props.backButtonItem.iconAfter ? backItem.iconAfter = props.backButtonItem.iconAfter : null
+    props.backButtonItem.svg ? backItem.svg = props.backButtonItem.svg : null
+    props.backButtonItem.svgBefore ? backItem.svgBefore = props.backButtonItem.svgBefore : null
+    props.backButtonItem.svgAfter ? backItem.svgAfter = props.backButtonItem.svgAfter : null
+    backItem.attributes = {
+      ...(props.backButtonItem.attributes ?? {}),
+      class: classes.join(' '),
+      'aria-controls': props.id ?? '',
+      'aria-expanded': String(opened.value)
+    }
+    backItem.callback = close
+    return [backItem, ...props.menu]
+  }
+  return props.menu
 })
 
 const classList = computed(() => {
@@ -229,7 +271,9 @@ defineExpose({
   closeAll,
   $el,
   items,
+  breadcrumb,
 })
+
 </script>
 
 <template>
@@ -249,6 +293,7 @@ defineExpose({
     <template v-for="(item, index) in menuItems" :key="index">
       <SrlMenuItem
         ref="items"
+        v-model:breadcrumb="breadcrumb"
         :item="item"
         :name="props.name"
         :index="index"
@@ -257,9 +302,11 @@ defineExpose({
         :initOpen="props.initOpen"
         :depth="props.depth"
         :disableClasses="props.disableClasses"
-        :backButonEnabled="props.backButonEnabled"
+        :backButtonEnabled="props.backButtonEnabled"
         :backButtonLabel="props.backButtonLabel"
         :backButtonItem="props.backButtonItem"
+        :path="props.path ?? []"
+        :backPath="props.backPath ?? []"
         @open="open"
         @close="close"
         @next="next"
@@ -268,6 +315,7 @@ defineExpose({
         @back="back"
         @link="link"
         @routerChange="routerChange"
+        @toggle="toggle"
       />
     </template>
   </ul>

package/srl/.srl/composables/article.ts

@@ -1,24 +1,24 @@
 import { computed, type ComputedRef } from 'vue';
-import { useRoute } from 'vue-router';
+import { useInstance } from '#composables/instance.ts'
 import useArticles from './articles';
 
 const articles = useArticles();
+const instance = useInstance();
 
-export default function useArticle(): ComputedRef<NsWowArticle | undefined> {
-  const route = useRoute();
-  return computed<NsWowArticle | undefined>(() => {
-    const slug = route.params.slug
-      ? (route.params.slug[0] as string)
-      : undefined;
-    const article = !slug
-      ? articles.value.find((article) => article.index)
-      : articles.value.find((article) => article.slug === slug);
+const slug = computed(() => {
+  return instance.value?.config.globalProperties.$route?.params?.slug
+    ? (instance.value?.config.globalProperties.$route?.params?.slug[0] as string)
+    : undefined;
+});
 
-    if (!article) {
-      console.error(`Article not found for slug: ${route.path}`);
-      return undefined;
-    }
+const article = computed<NsWowArticle | undefined>(() => {
+  const slugValue = slug.value;
+  const a = articles.value
+  return !slugValue
+    ? a.find((article) => article.index)
+    : a.find((article) => article.slug === slugValue);
+});
 
-    return article;
-  });
+export default function useArticle(): ComputedRef<NsWowArticle | undefined> {
+  return article;
 }

package/srl/.srl/composables/articles.ts

@@ -29,11 +29,17 @@
  */
 import { computed, type ComputedRef } from 'vue';
 import useConfig from './config.ts';
+import { useInstance } from '#composables/instance.ts';
 
 const config = useConfig();
+const instance = useInstance();
+const locale = computed(() => instance.value?.config.globalProperties.$route.params.locale);
 
 const articles = computed<NsWowArticle[]>(
-  () => config.value?.articles[config.value.locale],
+  () => {
+    const lang = locale.value || config.value.locale;
+    return config.value?.articles[lang] ?? [];
+  },
 );
 
 export default function useArticles(): ComputedRef<NsWowArticle[]> {

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

@@ -1,3 +1,4 @@
+import _instance from './instance';
 import _useArticle from './article';
 import _useArticles from './articles';
 import _useConfig from './config';
@@ -10,6 +11,8 @@ import _useViewPort from './viewPort';
 import _useLanguageSwitch from './languageSwitch';
 import * as cssStyles from './cssStyles.ts'
 
+export const setInstance = _instance.setInstance;
+export const useInstance = _instance.useInstance;
 export const useArticle = _useArticle;
 export const useArticles = _useArticles;
 export const useConfig = _useConfig;
@@ -24,6 +27,8 @@ export const addCssStyles = cssStyles.addCssStyles;
 export const useCssStyles = cssStyles.useCssStyles;
 
 export default {
+  setInstance,
+  useInstance,
   useArticle,
   useArticles,
   useConfig,

package/srl/.srl/composables/instance.ts

@@ -0,0 +1,13 @@
+import { ref } from 'vue';
+const app = ref();
+
+export function setInstance(instance) {
+  app.value = instance;
+}
+export function useInstance() {
+  return app;
+}
+export default {
+  setInstance,
+  useInstance,
+}

package/srl/.srl/composables/languageSwitch.ts

@@ -23,9 +23,6 @@ const languageSwitch = computed<NsWowLanguageSwitch>(() => {
       res.items.push({
         label: locale,
         href: `/${locale}`,
-        callback: () => {
-          Tr.switchLanguage(locale)
-        }
       })
     }
   }

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

@@ -1,8 +1,10 @@
 import { setConfig } from '#composables/config';
+import { setInstance } from '#composables/instance.ts'
 import { createApp } from 'vue';
 import { initI18n } from '@/i18n';
 import srlVuePlugin from '#plugins/vueSrlPlugin';
 import { clearPageState } from '#utils'
+import Translate from '@/i18n/translation.ts'
 
 import '#imports/app.scss';
 
@@ -10,15 +12,24 @@ import SrlPageApp from '../App.vue';
 import router from '@/router';
 
 export default async function initProject() {
+    const config = await setConfig();
     router.beforeEach((to, from, next) => {
         clearPageState();
         next();
     });
-    await setConfig();
+    router.afterEach(() => {
+        if (
+          router.currentRoute.value.params.locale
+          && config.value.locale !== router.currentRoute.value.params.locale
+        ) {
+            Translate.switchLanguage(router.currentRoute.value.params.locale as string);
+        }
+    })
     const i18n = initI18n();
     const app = (window.app = createApp(SrlPageApp));
     app.use(i18n);
     app.use(router);
     app.use(srlVuePlugin);
+    setInstance(app);
     return app;
 }

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

@@ -1,5 +1,5 @@
-import { isRouterPath, isExternalPath } from './uri';
-import { camelCase } from './camelCase';
+import { isFilePath, isRouterPath, isExternalPath } from './uri';
+import { camelCase } from './string';
 import { prepareHtmlContent } from './html';
 import {
     usePageState,
@@ -15,6 +15,7 @@ import {
 } from './pageState.ts';
 
 export {
+    isFilePath,
     isRouterPath,
     isExternalPath,
     camelCase,

package/srl/.srl/utils/uri.ts

@@ -1,36 +1,47 @@
+export function isFilePath(path: string): boolean {
+  return (
+    path.endsWith('.pdf') ||
+    path.endsWith('.doc') ||
+    path.endsWith('.docx') ||
+    path.endsWith('.xls') ||
+    path.endsWith('.xlsx') ||
+    path.endsWith('.ppt') ||
+    path.endsWith('.pptx') ||
+    path.endsWith('.zip') ||
+    path.endsWith('.html') ||
+    path.endsWith('.htm') ||
+    path.endsWith('.php') ||
+    path.endsWith('.asp') ||
+    path.endsWith('.aspx') ||
+    path.endsWith('.jsp') ||
+    path.endsWith('.xml') ||
+    path.endsWith('.json') ||
+    path.endsWith('.txt') ||
+    path.endsWith('.svg') ||
+    path.endsWith('.png') ||
+    path.endsWith('.jpg') ||
+    path.endsWith('.jpeg') ||
+    path.endsWith('.gif') ||
+    path.endsWith('.webp')
+  );
+}
+
 export function isRouterPath(path: string): boolean {
   return (
-    (path.startsWith('/') || path.startsWith('./')) &&
-    !path.startsWith('//') &&
-    !path.startsWith('javascript:') &&
-    !path.endsWith('.html') &&
-    !path.endsWith('.htm') &&
-    !path.endsWith('.php') &&
-    !path.endsWith('.asp') &&
-    !path.endsWith('.aspx') &&
-    !path.endsWith('.jsp') &&
-    !path.endsWith('.xml') &&
-    !path.endsWith('.json') &&
-    !path.endsWith('.txt') &&
-    !path.endsWith('.svg') &&
-    !path.endsWith('.png') &&
-    !path.endsWith('.jpg') &&
-    !path.endsWith('.jpeg') &&
-    !path.endsWith('.gif') &&
-    !path.endsWith('.webp') &&
-    !path.endsWith('.pdf') &&
-    !path.endsWith('.doc') &&
-    !path.endsWith('.docx') &&
-    !path.endsWith('.xls') &&
-    !path.endsWith('.xlsx') &&
-    !path.endsWith('.ppt') &&
-    !path.endsWith('.pptx') &&
-    !path.endsWith('.zip')
+    (
+      (
+        path.startsWith('/') &&
+        !path.startsWith('//')
+      ) ||
+      path.startsWith('./')
+    ) &&
+    !isFilePath(path)
   );
 }
 
 export function isExternalPath(path: string): boolean {
   return (
+    isFilePath(path) ||
     path.startsWith('http') ||
     path.startsWith('//') ||
     path.startsWith('mailto') ||
@@ -49,6 +60,7 @@ export function isExternalPath(path: string): boolean {
 }
 
 export default {
+  isFilePath,
   isRouterPath,
   isExternalPath,
 };