@simple-reporting/base 1.0.6 → 1.0.8

package/dev/package.json

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

package/scripts/components.js

@@ -339,6 +339,13 @@ async function writeComponent(group, name) {
     return false;
   }
 
+  const componentNameArray = name.split('.');
+  let componentName = name;
+  if (componentNameArray[1]) {
+    componentNameArray.shift()
+    componentName = componentNameArray.join(('.'));
+  }
+
   try {
     const stat = await statSync(join(folders.ld, group, name));
     console.error(`Component ${group}/${name} already exist!`);
@@ -353,9 +360,9 @@ async function writeComponent(group, name) {
     await mkdirSync(join(folders.ld, group, name));
     await mkdirSync(join(folders.ld, group, name, 'scss'));
     await writeFileSync(
-      join(folders.ld, group, name, `${name}.html`),
-      `<p class="srl-grid srl-${name} srl-linkable">
-  <span class="srl-grid__inner srl-${name}__text" doc-editable="paragraph">
+      join(folders.ld, group, name, `${componentName}.html`),
+      `<p class="srl-grid srl-${componentName} srl-linkable">
+  <span class="srl-grid__inner srl-${componentName}__text" doc-editable="paragraph">
     Editable Text
   </span>
 </p>
@@ -364,8 +371,8 @@ async function writeComponent(group, name) {
     await writeFileSync(
       join(folders.ld, group, name, `ld-conf.json`),
       `{
-  "name": "${name}",
-  "label": "${name.charAt(0).toUpperCase()}${name.slice(1)}"
+  "name": "${componentName}",
+  "label": "${componentName.charAt(0).toUpperCase()}${componentName.slice(1)}"
 }`,
     );
     await writeFileSync(
@@ -379,9 +386,9 @@ async function writeComponent(group, name) {
     await writeFileSync(
       join(folders.ld, group, name, 'scss', `general.scss`),
       `@use "srl";
-      .srl-${name} {
-      
-      }`,
+.srl-${componentName} {
+
+}`,
     );
     await writeFileSync(
       join(folders.ld, group, name, 'scss', `pdf.scss`),

package/scripts/ldd/mapLdd.js

@@ -167,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/Content/Icon.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const props = defineProps<{
+  item: NsWowNavigationItem
+}>();
+
+const prefix = props.item.iconPrefix ?? 'srl-icon'
+</script>
+
+<template>
+  <i :class="`${prefix} ${prefix}-${props.item.icon}`" aria-hidden="true"></i>
+</template>

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

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const props = defineProps<{
+  item: NsWowNavigationItem;
+}>();
+
+const prefix = props.item.iconPrefix ?? 'srl-icon'
+</script>
+
+<template>
+  <span>{{ props.item.label }}</span>
+  <i :class="`${prefix} ${prefix}-${props.item.iconAfter}`" aria-hidden="true"></i>
+</template>

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

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const props = defineProps<{
+  item: NsWowNavigationItem;
+}>();
+
+const prefix = props.item.iconPrefix ?? 'srl-icon'
+</script>
+
+<template>
+  <i :class="`${prefix} ${prefix}-${props.item.iconAfter}`" aria-hidden="true"></i>
+  <span>{{ props.item.label }}</span>
+</template>

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

@@ -5,5 +5,5 @@ const pops = defineProps<{
 </script>
 
 <template>
-  {{ pops.item.label }}
+  <span>{{ pops.item.label }}</span>
 </template>

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

@@ -3,6 +3,9 @@ import MenuItemContentText from './Content/Text.vue';
 import MenuItemContentImage from './Content/Image.vue';
 import MenuItemContentImageBefore from './Content/ImageBefore.vue';
 import MenuItemContentImageAfter from './Content/ImageAfter.vue';
+import MenuItemContentIcon from './Content/Icon.vue';
+import MenuItemContentIconBefore from './Content/IconBefore.vue';
+import MenuItemContentIconAfter from './Content/IconAfter.vue';
 
 const props = defineProps<{
   item: NsWowNavigationItem;
@@ -10,7 +13,22 @@ const props = defineProps<{
 </script>
 
 <template>
-  <MenuItemContentImage v-if="props.item.img" :item="props.item" />
+  <MenuItemContentIcon
+    v-if="props.item.icon"
+    :item="props.item"
+  />
+  <MenuItemContentIconBefore
+    v-else-if="props.item.iconBefore"
+    :item="props.item"
+  />
+  <MenuItemContentIconAfter
+    v-else-if="props.item.iconAfter"
+    :item="props.item"
+  />
+  <MenuItemContentImage
+    v-else-if="props.item.img"
+    :item="props.item"
+  />
   <MenuItemContentImageBefore
     v-else-if="props.item.imgBefore"
     :item="props.item"

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([
@@ -44,6 +66,8 @@ function toggle() {
       const item = menu.value?.items[0].$el;
       item.$el ? item.$el.focus() : item.focus();
     });
+  } else {
+    menu.value.closeAll();
   }
 }
 
@@ -102,6 +126,16 @@ defineExpose({
   menu,
 });
 
+function internalLinkClick(event: Event) {
+  !props.item.callback || props.item.callback(event);
+  routerChange()
+}
+
+function externalLinkClick(event: Event) {
+  !props.item.callback || props.item.callback(event);
+  link()
+}
+
 const dynamicAttributes = computed(() => {
   return props.item.attributes ?? {};
 });
@@ -117,7 +151,7 @@ const dynamicAttributes = computed(() => {
       :class="{ active: item.active }"
       :title="props.item.title ?? props.item.label"
       v-bind="dynamicAttributes"
-      @click="routerChange"
+      @click="internalLinkClick"
       @keydown.left.stop.prevent="prev"
       @keydown.up.stop.prevent="prev"
       @keydown.down.stop.prevent="next"
@@ -125,7 +159,6 @@ const dynamicAttributes = computed(() => {
       @keydown.tab.exact="tab"
       @keydown.shift.tab.exact="back"
       @keydown.esc.stop.prevent="close"
-      @keydown.enter="link"
     >
       <MenuItemContent :item="props.item" />
     </router-link>
@@ -135,9 +168,10 @@ const dynamicAttributes = computed(() => {
       ref="$el"
       :href="props.item.href"
       :title="props.item.title ?? props.item.label"
+      :aria-label="props.item.icon ? props.item.title ?? props.item.label : undefined"
       :target="props.item.href?.startsWith('http') ? '_blank' : undefined"
       v-bind="dynamicAttributes"
-      @click="link"
+      @click="externalLinkClick"
       @keydown.left.stop.prevent="prev"
       @keydown.up.stop.prevent="prev"
       @keydown.down.stop.prevent="next"
@@ -155,6 +189,7 @@ const dynamicAttributes = computed(() => {
       ref="$el"
       :tabindex="props.index === 0 && !props.disableTabIndex ? 0 : -1"
       :title="props.item.title ?? props.item.label"
+      :aria-label="props.item.icon ? props.item.title ?? props.item.label : undefined"
       v-bind="dynamicAttributes"
       @click="props.item.callback"
       @keydown.left.stop.prevent="prev"
@@ -177,8 +212,9 @@ const dynamicAttributes = computed(() => {
       :aria-expanded="opened"
       :aria-controls="`${props.name}-${id}`"
       :title="props.item.title ?? props.item.label"
+      :aria-label="props.item.icon ? props.item.title ?? props.item.label : undefined"
       v-bind="dynamicAttributes"
-      @click="toggle"
+      @click.stop="toggle"
       @keydown.left.stop.prevent="prev"
       @keydown.up.stop.prevent="prev"
       @keydown.down.stop.prevent="next"
@@ -198,6 +234,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,31 @@ 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: close,
+      },
+      ...props.menu,
+    ] : props.menu
+});
+
 defineExpose({
   closeAll,
   $el,
@@ -157,8 +206,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 +217,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"

package/srl/composables/index.ts

@@ -7,6 +7,7 @@ import _useMenu from './menu';
 import _useSearch from './search';
 import _useSettings from './settings';
 import _useViewPort from './viewPort';
+import _useLanguageSwitch from './languageSwitch';
 import * as cssStyles from './cssStyles.ts'
 
 export const useArticle = _useArticle;
@@ -18,6 +19,7 @@ export const useMenu = _useMenu;
 export const useSearch = _useSearch;
 export const useSettings = _useSettings;
 export const useViewPort = _useViewPort;
+export const useLanguageSwitch = _useLanguageSwitch;
 export const addCssStyles = cssStyles.addCssStyles;
 export const useCssStyles = cssStyles.useCssStyles;
 
@@ -31,6 +33,7 @@ export default {
   useSearch,
   useSettings,
   useViewPort,
+  useLanguageSwitch,
   addCssStyles,
   useCssStyles,
 };

package/srl/composables/languageSwitch.ts

@@ -0,0 +1,53 @@
+import { computed } from 'vue'
+import Tr from '@/i18n/translation.ts'
+import { useArticle, useConfig } from '#composables'
+
+
+
+type NsWowLanguageSwitch = {
+  current: { label: string; href: string },
+  items: NsWowNavigationItem[]
+}
+
+const languageSwitch = computed<NsWowLanguageSwitch>(() => {
+
+  const config = useConfig()
+  const article = useArticle()
+
+  const res: NsWowLanguageSwitch = {
+    current: { label: config.value.locale, href: `/${config.value.locale}` },
+    items: []
+  }
+  for (const locale of config.value.settings.languages) {
+    if (locale !== config.value.locale) {
+      res.items.push({
+        label: locale,
+        href: `/${locale}`,
+        callback: () => {
+          Tr.switchLanguage(locale)
+        }
+      })
+    }
+  }
+
+  if (article.value) {
+    const uuid = article.value.uuid
+    if (uuid) {
+      for (const locale of config.value.settings.languages) {
+        const slug = config.value.articles[locale].find((a) => a.uuid === uuid)?.slug || ''
+        if (locale === config.value.locale) {
+          res.current.href = `/${locale}/${slug}`
+        } else {
+          const item = res.items.find((i) => i.label === locale)
+          item ? item.href = `/${locale}/${slug}` : null
+        }
+      }
+    }
+  }
+
+  return res
+})
+
+export default function useLanguageSwitch() {
+  return languageSwitch
+}