@simple-reporting/base 1.0.5 → 1.0.7

package/dev/package.json

@@ -19,7 +19,7 @@
     "postinstall": "srl prepare"
   },
   "dependencies": {
-    "@simple-reporting/base": "^1.0.5",
+    "@simple-reporting/base": "^1.0.7",
     "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.5",
+  "version": "1.0.7",
   "description": "Manage srl templates, build and publish",
   "bin": {
     "srl": "cli.js"

package/scripts/ldd/mapLdd.js

@@ -152,7 +152,13 @@ async function mapComponents(lddJson) {
           );
           const componentHtml = readFileSync(htmlPath, { encoding: 'utf-8' });
 
-          lddComponents.push({ ...componentDeclaration, html: componentHtml });
+          lddComponents.push({ 
+            ...componentDeclaration, 
+            html: componentHtml
+                    .replaceAll(/>\s+/g, ">")
+                    .replaceAll(/\s+</g, "<")
+                    .trim()
+          });
         }
       } catch (error) {}
 
@@ -161,10 +167,11 @@ async function mapComponents(lddJson) {
         const vueFiles = globSync(join(groupPath, component, '*.vue'));
         if (vueFiles.length) {
           vueFiles.forEach( c => {
-            const vueName = c.split('/').pop().substring(0, -4);
+            const vueFile = c.split('/').pop();
+            const vueName = toUpperCamelCase(vueFile.substring(0, vueFile.length - 4));
             vueComponents.push({
-              name: `SrlLd${toUpperCamelCase(vueName)}`,
-              path: join('#ld', group, component, `${vueName}.vue`),
+              name: `SrlLd${vueName}`,
+              path: join('#ld', group, component, vueFile),
             });
           })
         }

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

@@ -5,6 +5,25 @@ import MenuList from './List.vue';
 import type { RouterLink } from 'vue-router';
 import { isExternalPath } from '#utils/uri';
 
+type BackButtonItem = {
+  title?: string;
+  img?: {
+    src: string;
+    alt?: string;
+  };
+  imgBefore?: {
+    src: string;
+    alt?: string;
+  };
+  imgAfter?: {
+    src: string;
+    alt?: string;
+  };
+  attributes?: {
+    [key: string]: string;
+  };
+};
+
 const props = defineProps<{
   name: string;
   item: NsWowNavigationItem;
@@ -13,6 +32,9 @@ const props = defineProps<{
   disableTabIndex: boolean;
   initOpen: number;
   depth: number;
+  backButonEnabled?: boolean;
+  backButtonLabel?: string;
+  backButtonItem: BackButtonItem
 }>();
 
 const emit = defineEmits([
@@ -198,6 +220,9 @@ const dynamicAttributes = computed(() => {
       :disableTab="props.disableTab"
       :initOpen="props.initOpen"
       :depth="props.depth + 1"
+      :backButonEnabled="props.backButonEnabled"
+      :backButtonLabel="props.backButonEnabled ? props.item.label : undefined"
+      :backButtonItem="props.backButtonItem"
       v-model:opened="opened"
       @link="link"
       @routerChange="emit('routerChange')"

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

@@ -50,18 +50,41 @@
  *   @link="handleNavigation"
  * />
  */
-import { ref } from 'vue';
+import { computed, ref } from 'vue'
 import MenuItem from './Item.vue';
 
+type BackButtonItem = {
+  title?: string;
+  img?: {
+    src: string;
+    alt?: string;
+  };
+  imgBefore?: {
+    src: string;
+    alt?: string;
+  };
+  imgAfter?: {
+    src: string;
+    alt?: string;
+  };
+  attributes?: {
+    [key: string]: string;
+  };
+};
+
 const props = withDefaults(
   defineProps<{
     name: string;
     menu: NsWowNavigationItem[];
+    id?: string;
     disableTab?: boolean;
     disableTabIndex?: boolean;
     initOpen?: number;
     singleOpen?: boolean;
     depth?: number;
+    backButonEnabled?: boolean;
+    backButtonItem?: BackButtonItem;
+    backButtonLabel?: string;
   }>(),
   {
     disableTab: false,
@@ -69,6 +92,7 @@ const props = withDefaults(
     initOpen: 0,
     singleOpen: true,
     depth: 0,
+    backButtonItem: {}
   },
 );
 
@@ -149,6 +173,34 @@ function closeAll(keep?: number | string) {
 
 const $el = ref<HTMLUListElement>();
 
+const menuItems = computed<NsWowNavigationItem[]>(() => {
+  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,
+            {
+              'aria-controls': props.id,
+              'aria-expanded': opened.value
+            }
+          ):
+          {
+            'aria-controls': props.id,
+            'aria-expanded': opened.value
+          },
+        callback: () => {
+          opened.value = false
+          emit('back')
+        },
+      },
+      ...props.menu,
+    ] : props.menu
+});
+
 defineExpose({
   closeAll,
   $el,
@@ -157,8 +209,8 @@ defineExpose({
 </script>
 
 <template>
-  <ul ref="$el" :hidden="!opened">
-    <template v-for="(item, index) in props.menu" :key="index">
+  <ul ref="$el" :id="props.id" :hidden="!opened">
+    <template v-for="(item, index) in menuItems" :key="index">
       <MenuItem
         ref="items"
         :item="item"
@@ -168,6 +220,9 @@ defineExpose({
         :disableTabIndex="props.disableTabIndex"
         :initOpen="props.initOpen"
         :depth="props.depth"
+        :backButonEnabled="props.backButonEnabled"
+        :backButtonLabel="props.backButtonLabel"
+        :backButtonItem="props.backButtonItem"
         @open="open"
         @close="close"
         @next="next"