@simple-reporting/base 1.0.7 → 1.0.9

package/dev/package.json

@@ -19,7 +19,7 @@
     "postinstall": "srl prepare"
   },
   "dependencies": {
-    "@simple-reporting/base": "^1.0.7",
+    "@simple-reporting/base": "^1.0.9",
     "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.7",
+  "version": "1.0.9",
   "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/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

@@ -66,6 +66,8 @@ function toggle() {
       const item = menu.value?.items[0].$el;
       item.$el ? item.$el.focus() : item.focus();
     });
+  } else {
+    menu.value.closeAll();
   }
 }
 
@@ -124,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 ?? {};
 });
@@ -139,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"
@@ -147,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>
@@ -157,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"
@@ -177,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"
@@ -199,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"

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

@@ -192,10 +192,7 @@ const menuItems = computed<NsWowNavigationItem[]>(() => {
             'aria-controls': props.id,
             'aria-expanded': opened.value
           },
-        callback: () => {
-          opened.value = false
-          emit('back')
-        },
+        callback: close,
       },
       ...props.menu,
     ] : props.menu

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
+}

package/srl/composables/search.ts

@@ -38,6 +38,7 @@
  */
 import { computed, type ComputedRef, ref } from 'vue';
 import { HTMLElement, parse as parseHtml } from 'node-html-parser';
+import { useConfig, useArticles } from '#composables';
 
 const storage = ref<{
   [locale: string]: NsWowSearchList[];
@@ -68,7 +69,7 @@ function makeWords(html: string) {
     .replace(/\s{2,}/g, ' ');
 }
 
-export default async function useSearch(): ComputedRef<NsWowSearchList[]> {
+export default async function useSearch(): Promise<ComputedRef<NsWowSearchList[]>> {
   const config = useConfig();
   if (!storage.value || !storage.value[config.value.locale]) {
     !storage.value ? (storage.value = {}) : null;

package/srl/types/nswow.d.ts

@@ -92,6 +92,9 @@ declare global {
   export type NsWowNavigationItem = {
     label: string;
     title?: string;
+    icon?: string;
+    iconBefore?: string;
+    iconAfter?: string;
     img?: {
       src: string;
       alt?: string;

package/srl/utils/html.ts

@@ -7,6 +7,8 @@ function attributesToString(attributes: Record<string, string | null>): string {
     .join(' ');
 }
 
+type AttrObj = { [key: string]: string | null };
+
 export function prepareHtmlContent(text: string): string {
   const articles = useArticles();
   const locale = useLocale();
@@ -14,8 +16,8 @@ export function prepareHtmlContent(text: string): string {
   const regex = /<a\s+([^>]+)>(.*?)<\/a>/gis;
   text = text.replace(regex, (match, attrString, innerText) => {
     // Attribute in ein Array umwandeln
-    const attrObj = {};
-    attrString.replace(/([a-zA-Z0-9\-_]+)(?:="([^"]*)")?/g, (m, key, value) => {
+    const attrObj: AttrObj = {};
+    attrString.replace(/([a-zA-Z0-9\-_]+)(?:="([^"]*)")?/g, (m, key: string, value: string | null) => {
       attrObj[key] = value || null;
       return m;
     });
@@ -66,6 +68,11 @@ export function prepareHtmlContent(text: string): string {
     return match;
   });
 
+  text = text.replace(
+    /<template-([a-z]+)>([\s\S]*?)<\/template-\1>/g,
+    (_match, name, content) => `<template #${name}>${content}</template>`
+  );
+
   text = text.replaceAll('../', `./`);
 
   text = text.replace(/<style[^>]*>([\s\S]*?)<\/style>/gi, (match, p1) => {