@simple-reporting/base 1.0.14 → 1.0.16

package/package.json

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

package/plugins/viteSrlPlugin.d.ts

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

package/plugins/viteSrlPlugin.js

@@ -1,5 +1,4 @@
-import { fileURLToPath, URL } from 'node:url';
-import { existsSync, readFileSync, writeFileSync, readdirSync, statSync } from 'node:fs';
+import { existsSync, readFileSync, writeFileSync } from 'node:fs';
 import { join, relative } from 'node:path/posix';
 import { execSync } from 'node:child_process';
 import folders from '../scripts/folders.js';
@@ -14,6 +13,7 @@ import {
   mapScss,
 } from '../scripts/build.js';
 import chalk from 'chalk';
+import { vueComponents } from '../scripts/vue/components.js';
 
 
 /**
@@ -36,10 +36,8 @@ function printPromptsMessage(messages) {
   console.log('');
 }
 
-
 const data = {
-  version: null,
-  components:{}
+  version: null
 };
 const srlConfig = readConfigJson();
 
@@ -95,39 +93,9 @@ function checkForUpdates() {
     }
   } catch (e) {}
 }
-
-function findVueFilesInSrl() {
-  const componentsPath = join(folders.srlSrc, 'components');
-  const baseDir = join(componentsPath, 'Srl');
-  const result = {};
-
-  function search(dir) {
-    for (const entry of readdirSync(dir)) {
-      const fullPath = join(dir, entry);
-      if (statSync(fullPath).isDirectory()) {
-        search(fullPath);
-      } else if (entry.endsWith('.vue')) {
-        const path = relative(componentsPath, fullPath);
-        const name = path.slice(0, -4)
-          .replaceAll('/', '')
-          .replaceAll('\\', '');
-
-        result[name] = `@/components/${path}`;
-      }
-    }
-  }
-
-  if (existsSync(baseDir) && statSync(baseDir).isDirectory()) {
-    search(baseDir);
-  }
-
-  return result;
-}
-
 async function startActions() {
   data.version = getPackageVersion();
   checkForUpdates();
-  data.components = findVueFilesInSrl();
   if (!srlConfig || JSON.stringify(srlConfig) !== JSON.stringify(data)) {
     writeConfigJson(data);
   }
@@ -139,6 +107,7 @@ async function startActions() {
     ]);
   }
 
+  await vueComponents();
   await beaver(0);
   await map();
   await mapJs();
@@ -160,7 +129,6 @@ export default function viteSrlPlugin() {
   return {
     name: 'vite-srl-plugin',
     config(config) {
-
       startActions();
 
       config.base = './';
@@ -169,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;
@@ -229,6 +198,13 @@ export default function viteSrlPlugin() {
         ) {
           triggerAction(mapLdd);
         }
+
+        if (
+          path.includes('src/components/') &&
+          path.endsWith('.vue')
+        ) {
+          triggerAction(vueComponents);
+        }
       });
 
       server.watcher.on('unlink', (path) => {
@@ -264,6 +240,13 @@ export default function viteSrlPlugin() {
         ) {
           triggerAction(mapLdd);
         }
+
+        if (
+          path.includes('src/components/') &&
+          path.endsWith('.vue')
+        ) {
+          triggerAction(vueComponents);
+        }
       });
     },
   };

package/scripts/build.js

@@ -243,6 +243,23 @@ async function zipApp() {
 async function zipLdd() {
   console.log("\n\nCreate zip file for LDD");
   await checkFolders();
+
+  const lddPdfDir = join(folders.srlOutput, 'ldd', 'pdf');
+
+  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) {}
+
+  try {
+    const customerDir = join(folders.root, 'pdf', 'customer');
+    statSync(customerDir);
+    await cpSync(customerDir, lddPdfDir, { recursive: true });
+    console.log('Contents of pdf/customer have been copied to ' + lddPdfDir);
+  } catch (e) {}
+
   const archiver = require('archiver');
   const output = createWriteStream(join(outputPath, 'design.zip'));
   const archive = archiver('zip', {

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.d.ts

@@ -0,0 +1 @@
+export function vueComponents(): Promise<void>;

package/scripts/vue/components.js

@@ -0,0 +1,93 @@
+import folders from '../folders.js';
+import { join, relative } from 'node:path/posix';
+import { existsSync, readdirSync, statSync, writeFileSync } from 'node:fs';
+
+function toPascalAfterSlash(str) {
+  return str.replace(/\/(.)/g, (_, c) => c.toUpperCase());
+}
+function readVueDir(entryPath, prefix = '') {
+  const componentsPath = join(entryPath, 'components');
+  const result = {};
+
+  function search(dir) {
+    for (const entry of readdirSync(dir)) {
+      const fullPath = join(dir, entry);
+      if (statSync(fullPath).isDirectory()) {
+        search(fullPath);
+      } else if (entry.endsWith('.vue')) {
+        const path = relative(componentsPath, fullPath);
+        let name = path.slice(0, -4);
+        name = toPascalAfterSlash(name);
+        name = name.replaceAll('/', '');
+
+        result[name] = {
+          component: `${prefix}components/${path}`,
+          type: relative(folders.srlTypes, fullPath)
+        };
+      }
+    }
+  }
+
+  if (existsSync(componentsPath) && statSync(componentsPath).isDirectory()) {
+    search(componentsPath);
+  }
+
+  return result;
+}
+
+export async function vueComponents() {
+  const appComponents = readVueDir(folders.srlSrc, '@/');
+  const srlComponents = readVueDir(folders.srlRoot, '#');
+
+  const components = []
+  const types = []
+
+  for (const [name, info] of Object.entries(appComponents)) {
+    components.push(
+      `app.component('${name}', defineAsyncComponent(() => import('${info.component}')));`,
+    )
+    types.push({
+      name: name,
+      type: `  type ${name} = typeof import('${info.type}')['default'];`,
+    })
+  }
+
+  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('${componentPath}')));`,
+      )
+      types.push({
+        name: name,
+        type: `  type ${name} = typeof import('${typePath}')['default'];`,
+      })
+    }
+  }
+
+  writeFileSync(join(folders.srlPlugins, 'asyncSrlComponents.ts'),
+`import { defineAsyncComponent, type App } from 'vue';
+export default function asyncSrlComponents(app: App): void {
+  ${components.join('\n  ')}
+}
+`, 'utf8');
+
+  const componentsInterface = types.map(t => {
+    return `  ${t.name}: ${t.name};`
+  })
+
+  writeFileSync(join(folders.srlTypes, 'components.d.ts'),
+`export {};
+declare global {
+${types.map(t=>t.type).join("\n")}
+}
+
+interface _GlobalComponents {
+${componentsInterface.join("\n")}
+}
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents extends _GlobalComponents {}
+}
+`, 'utf8');
+}

package/srl/components/Srl/Article/{DialogButton.vue → Dialog/Button.vue}

@@ -11,7 +11,7 @@ const config = useConfig();
 const articles = useArticles();
 const id = ref<string>(`srl-page__dialog-${useId()}`);
 const content = ref<string>('');
-const dialog = ref<typeof SrlPageDialog | null>(null);
+const dialog = ref<SrlPageDialog | null>(null);
 async function loadContent() {
   const article = articles.value.find((article) => article.uuid === props.uuid);
   if (article) {

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUpdated, ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 
 const props = defineProps<{
   accordion: {

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

@@ -1,11 +1,4 @@
 <script setup lang="ts">
-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
@@ -15,43 +8,43 @@ const props = defineProps<{
 </script>
 
 <template>
-  <MenuItemContentIcon
+  <SrlMenuItemContentIcon
     v-if="props.item.icon"
     :item="props.item"
     :depth="props.depth"
     :disableClasses="props.disableClasses"
   />
-  <MenuItemContentIconBefore
+  <SrlMenuItemContentIconBefore
     v-else-if="props.item.iconBefore"
     :item="props.item"
     :depth="props.depth"
     :disableClasses="props.disableClasses"
   />
-  <MenuItemContentIconAfter
+  <SrlMenuItemContentIconAfter
     v-else-if="props.item.iconAfter"
     :item="props.item"
     :depth="props.depth"
     :disableClasses="props.disableClasses"
   />
-  <MenuItemContentImage
+  <SrlMenuItemContentImage
     v-else-if="props.item.img"
     :item="props.item"
     :depth="props.depth"
     :disableClasses="props.disableClasses"
   />
-  <MenuItemContentImageBefore
+  <SrlMenuItemContentImageBefore
     v-else-if="props.item.imgBefore"
     :item="props.item"
     :depth="props.depth"
     :disableClasses="props.disableClasses"
   />
-  <MenuItemContentImageAfter
+  <SrlMenuItemContentImageAfter
     v-else-if="props.item.imgAfter"
     :item="props.item"
     :depth="props.depth"
     :disableClasses="props.disableClasses"
   />
-  <MenuItemContentText
+  <SrlMenuItemContentText
     v-else
     :item="props.item"
     :depth="props.depth"

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

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, useId } from 'vue'
-import MenuItemContent from './Item/Content.vue'
-import MenuList from './List.vue'
 import type { RouterLink } from 'vue-router'
 import { isExternalPath } from '#utils/uri'
 
@@ -169,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"
@@ -187,7 +186,7 @@ const classListItem = computed(() => {
       @keydown.shift.tab.exact="back"
       @keydown.esc.stop.prevent="close"
     >
-      <MenuItemContent
+      <SrlMenuItemContent
         :item="props.item"
         :depth="props.depth"
         :disableClasses="props.disableClasses"
@@ -197,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"
@@ -212,18 +212,19 @@ const classListItem = computed(() => {
       @keydown.shift.tab.exact="back"
       @keydown.esc.stop.prevent="close"
     >
-      <MenuItemContent
+      <SrlMenuItemContent
         :item="props.item"
         :depth="props.depth"
         :disableClasses="props.disableClasses"
       />
     </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"
@@ -237,18 +238,19 @@ const classListItem = computed(() => {
       @keydown.shift.tab.exact="back"
       @keydown.esc.stop.prevent="close"
     >
-      <MenuItemContent
+      <SrlMenuItemContent
         :item="props.item"
         :depth="props.depth"
         :disableClasses="props.disableClasses"
       />
     </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}`"
@@ -265,13 +267,13 @@ const classListItem = computed(() => {
       @keydown.shift.tab.exact="back"
       @keydown.esc.stop.prevent="close"
     >
-      <MenuItemContent
+      <SrlMenuItemContent
         :item="props.item"
         :depth="props.depth"
         :disableClasses="props.disableClasses"
       />
     </button>
-    <MenuList
+    <SrlMenu
       v-if="props.item.children"
       ref="menu"
       :id="`${props.name}-${id}`"

package/srl/components/Srl/{Menu/List.vue → Menu.vue}

@@ -51,7 +51,6 @@
  * />
  */
 import { computed, ref } from 'vue'
-import MenuItem from './Item.vue'
 
 type BackButtonItem = {
   title?: string
@@ -108,7 +107,7 @@ const emit = defineEmits([
   'tab',
   'back',
 ])
-const items = ref<Array<typeof MenuItem>>([])
+const items = ref<SrlMenuItem[]>([])
 
 const opened = defineModel('opened', { type: Boolean, default: true })
 
@@ -168,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()
   })
 }
@@ -247,7 +246,7 @@ defineExpose({
     @keydown.left.prevent.stop="focusClickable(menuItems.length - 1)"
   >
     <template v-for="(item, index) in menuItems" :key="index">
-      <MenuItem
+      <SrlMenuItem
         ref="items"
         :item="item"
         :name="props.name"

package/srl/components/Srl/Page/Dialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import SrlPageCustomDialog from '@//Dialog.vue';
+import SrlPageCustomDialog from '@/Dialog.vue';
 import Autoload from '@/Autoload.ts';
 
 const props = withDefaults(

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,

package/srl/composables/viewPort.ts

@@ -50,17 +50,18 @@ type ViewPorts = {
 };
 
 const { breakpoints } = grid;
+const bp = breakpoints as Breakpoints;
 const innerWidth = ref<number>(window.innerWidth);
 
 const viewPorts = computed<ViewPorts>(() => {
   const res: ViewPorts = {
-    breakPoints: breakpoints,
+    breakPoints: bp,
     innerWidth: window.innerWidth,
     viewPort: null,
   };
 
-  for (const key in breakpoints) {
-    if (breakpoints[key] <= innerWidth.value) {
+  for (const key in bp) {
+    if (bp[key] <= innerWidth.value) {
       res.viewPort = key;
     } else {
       break;

package/srl/plugins/asyncLdComponent.ts

@@ -1,2 +1,2 @@
-import { defineAsyncComponent } from 'vue';
-export default function asyncLdComponent(app) {}
+import { defineAsyncComponent } from 'vue'
+export default function asyncLdComponent(app) {}

package/srl/plugins/asyncSrlComponents.ts

@@ -0,0 +1,2 @@
+import { defineAsyncComponent } from 'vue';
+export default function asyncSrlComponents(app) {}

package/srl/plugins/initProject.ts

@@ -5,7 +5,7 @@ import srlVuePlugin from '#plugins/vueSrlPlugin';
 
 import '#imports/app.scss';
 
-import SrlPageApp from '#components/Srl/Page/App.vue';
+import SrlPageApp from '../App.vue';
 import router from '@/router';
 
 export default async function initProject() {

package/srl/plugins/vueSrlPlugin.ts

@@ -1,27 +1,10 @@
-import { defineComponent, type App, defineAsyncComponent } from 'vue'
-import SrlAriaTabChain from '#components/Srl/Aria/TabChain.vue';
-import SrlArticleAutoload from '#components/Srl/Article/Autoload.vue';
-import SrlArticleRoot from '#components/Srl/Article/Root.vue';
-import SrlArticleDialogButton from '#components/Srl/Article/DialogButton.vue';
-import SrlMenu from '#components/Srl/Menu/List.vue';
-import SrlPageDialog from '#components/Srl/Page/Dialog.vue';
-
+import { type App } from 'vue'
 import asyncLdComponent from './asyncLdComponent.ts';
+import asyncSrlComponents from '#plugins/asyncSrlComponents.ts';
 
 export default {
   install(app: App) {
-    app.component('SrlAriaTabChain', defineComponent(SrlAriaTabChain));
-    app.component('SrlArticleAutoload', defineComponent(SrlArticleAutoload));
-    app.component('SrlArticleRoot', defineComponent(SrlArticleRoot));
-    app.component(
-      'SrlArticleDialogButton',
-      defineComponent(SrlArticleDialogButton),
-    );
-    app.component('SrlPageDialog', defineComponent(SrlPageDialog));
-    app.component('SrlMenu', defineComponent(SrlMenu));
-    app.component('SrlNoteAccordion', defineAsyncComponent(() => import('#components/Srl/Note/Accordion.vue')));
-    app.component('SrlNoteAccordionToggle', defineAsyncComponent(() => import('#components/Srl/Note/Accordion/Toggle.vue')));
-    app.component('SrlNoteAccordionContent', defineAsyncComponent(() => import('#components/Srl/Note/Accordion/Content.vue')));
+    asyncSrlComponents(app)
     asyncLdComponent(app);
   },
 };

package/srl/types/components.d.ts

@@ -1,20 +1,6 @@
-import { Component, App } from 'vue';
-
-interface window {
-  app: App;
-}
-interface _GlobalComponents {
-  SrlAriaTabChain: (typeof import('../components/Srl/Aria/TabChain.vue'))['default'];
-  SrlArticleAutoload: (typeof import('../components/Srl/Article/Autoload.vue'))['default'];
-  SrlArticleDialogButton: (typeof import('../components/Srl/Article/DialogButton.vue'))['default'];
-  SrlArticleRoot: (typeof import('../components/Srl/Article/Root.vue'))['default'];
-  SrlMenu: (typeof import('../components/Srl/Menu/List.vue'))['default'];
-  SrlPageDialog: (typeof import('../components/Srl/Page/Dialog.vue'))['default'];
-  SrlNoteAccordion: (typeof import('../components/Srl/Note/Accordion.vue'))['default'];
-  SrlNoteAccordionToggle: (typeof import('../components/Srl/Note/Accordion/Toggle.vue'))['default'];
-  SrlNoteAccordionContent: (typeof import('../components/Srl/Note/Accordion/Content.vue'))['default'];
-}
-
+export {}
+declare global {}
+interface _GlobalComponents {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents extends _GlobalComponents {}
 }