@simple-reporting/base 0.1.111 → 1.0.0

package/srl/composables/config.ts

@@ -0,0 +1,165 @@
+/**
+ * `src/composables/config.ts`
+ *
+ * A Vue 3 composable that manages the application configuration.
+ * Handles loading and accessing various configuration aspects including
+ * settings, translations, article data, and menu structures.
+ *
+ * ## Core Functionality
+ * - Loads configuration from multiple JSON files
+ * - Manages application settings and supported languages
+ * - Handles internationalization with translations
+ * - Provides routing information for different locales
+ * - Manages downloadable content references
+ * - Offers environment detection helpers
+ *
+ * ## Data Structure
+ * - `NsWowConfig`: Main configuration object containing:
+ *   - `locale`: Current active locale
+ *   - `settings`: Application settings
+ *   - `articles`: Article data by language
+ *   - `menus`: Menu structures by language
+ *   - `translations`: Translation strings by language
+ *   - `downloads`: Download data by language
+ *
+ * ## Main Functions
+ * - `setConfig()`: Initializes the full configuration by loading all data files
+ * - `loadSettings()`: Loads application settings from JSON
+ * - `loadTranslations()`: Loads translation data
+ * - `loadRouting(locale)`: Loads routing information for specified locale
+ * - `loadDownloads(locale)`: Loads download data for specified locale
+ * - `useConfig()`: Returns the reactive configuration reference
+ *
+ * ## Environment Helpers
+ * - `isPreview()`: Checks if application is running in preview mode
+ * - `isDevelopment()`: Checks if application is running in development mode
+ * - `isWorkboxEnabled()`: Determines if service worker functionality is enabled
+ *
+ * ## Usage
+ * const config = useConfig()
+ */
+import { ref, type Ref } from 'vue';
+
+const config = ref<NsWowConfig>({
+  locale: 'de',
+  settings: {
+    languages: ['de', 'en'],
+    defaultLanguage: 'de',
+    shortBreadcrumb: false,
+    search: {
+      boldTheWord: true,
+    },
+    categories: [],
+  },
+  articles: {},
+  menus: {},
+  translations: {},
+  downloads: {},
+});
+
+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);
+
+    config.value.translations[locale] = config.value.translations[locale] || {};
+
+    const defaultMessages = import.meta.glob('@/locales/*.json', {
+      eager: true,
+      import: 'default',
+    });
+
+    const path = `/src/locales/${locale}.json`;
+    if (defaultMessages[path]) {
+      config.value.translations[locale] = Object.assign(
+        defaultMessages[path],
+        config.value.translations[locale],
+      );
+    }
+  }
+  return config;
+}
+
+async function loadSettings() {
+  const file = `./json/settings.json`;
+  try {
+    const response: Response = await fetch(file);
+    const data: NsWowSettings = await response.json();
+    config.value.settings = Object.assign(config.value.settings, data);
+    config.value.locale = data.defaultLanguage;
+    document.documentElement.lang = data.defaultLanguage;
+  } catch (e) {
+    errorLog(`"${file}" could not be loaded.`, e);
+  }
+}
+
+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;
+  } catch (e) {
+    errorLog(`"${file}" could not be loaded.`, e);
+  }
+}
+
+async function loadRouting(locale: string) {
+  const file: string = `./json/routing_${locale}.json`;
+  try {
+    const response: Response = await fetch(file);
+    const routing: NsWowResponseRouting = await response.json();
+    config.value.articles[locale] = routing.pages;
+    config.value.menus[locale] = routing.menu;
+  } catch (e) {
+    errorLog(`"${file}" could not be loaded.`, e);
+  }
+}
+
+async function loadDownloads(locale: string) {
+  config.value.downloads[locale] = {};
+  const file: string = `./downloads/downloads_${locale}.json`;
+  try {
+    const response: Response = await fetch(file);
+    const data = await response.json();
+    config.value.downloads[locale] = data;
+  } catch (e) {
+    errorLog(`"${file}" could not be loaded.`, e);
+  }
+}
+
+function useConfig(): Ref<NsWowConfig> {
+  return config;
+}
+
+function isPreview(): boolean {
+  return window.location.pathname.includes('/preview/');
+}
+
+function isDevelopment(): boolean {
+  return import.meta.env.DEV;
+}
+
+function isWorkboxEnabled(): boolean {
+  return (
+    (!isPreview() && !isDevelopment()) ||
+    (isDevelopment() && import.meta.env.VITE_WORKBOX === 'true')
+  );
+}
+
+function errorLog(message: string, error: Error): void {
+  isDevelopment() || isPreview()
+    ? console.error(`Error: ${message}`, error)
+    : null;
+}
+
+export default useConfig;
+export { setConfig, useConfig, isPreview, isDevelopment };

package/srl/composables/downloads.ts

@@ -0,0 +1,46 @@
+/**
+ * `downloads.ts`
+ *
+ * This Vue 3 composable provides access to localized download data.
+ * It loads download information from JSON files for each supported language
+ * and returns a computed reference to the data in the current locale.
+ *
+ * ## Imports
+ * - `computed`, `ref`, `ComputedRef`: Vue reactivity utilities
+ * - `useConfig`: Composable for accessing application configuration
+ *
+ * ## Reactive Variables
+ * - `downloads`: Reference object storing download data for all languages
+ * - `computedDownloads`: Singleton computed reference for current locale's download data
+ *
+ * ## Function: useDownloads
+ * - Asynchronous function that returns a computed reference to download data
+ * - Loads download data JSON files for all configured languages on first call
+ * - Initializes the computed reference if not already created
+ * - Returns the same computed reference on subsequent calls
+ * - Download data is filtered by the current locale from the configuration
+ *
+ * ## Return Value
+ * - ComputedRef<NsWowDownloads>: A computed reference to download data
+ *   in the current locale
+ *
+ * ## Usage Example
+ * ```typescript
+ * const downloads = await useDownloads()
+ * console.log(downloads.value.structure) // Array of download structure items
+ */
+import { computed, type ComputedRef } from 'vue';
+import useConfig from './config';
+
+const config = useConfig();
+
+const downloads = computed<NsWowDownload[]>(() => {
+  if (!config.value.downloads[config.value.locale]) {
+    return [];
+  }
+  return config.value.downloads[config.value.locale].structure;
+});
+
+export default function useDownloads(): ComputedRef<NsWowDownload[]> {
+  return downloads;
+}

package/srl/composables/index.ts

@@ -0,0 +1,34 @@
+import _useArticle from './article';
+import _useArticles from './articles';
+import _useConfig from './config';
+import _useDownloads from './downloads';
+import _useLocale from './locale';
+import _useMenu from './menu';
+import _useRoot from './root';
+import _useSearch from './search';
+import _useSettings from './settings';
+import _useViewPort from './viewPort';
+
+export const useArticle = _useArticle;
+export const useArticles = _useArticles;
+export const useConfig = _useConfig;
+export const useDownloads = _useDownloads;
+export const useLocale = _useLocale;
+export const useMenu = _useMenu;
+export const useRoot = _useRoot;
+export const useSearch = _useSearch;
+export const useSettings = _useSettings;
+export const useViewPort = _useViewPort;
+
+export default {
+  useArticle,
+  useArticles,
+  useConfig,
+  useDownloads,
+  useLocale,
+  useMenu,
+  useRoot,
+  useSearch,
+  useSettings,
+  useViewPort,
+};

package/srl/composables/locale.ts

@@ -0,0 +1,8 @@
+import useConfig from './config';
+import { computed, type ComputedRef } from 'vue';
+
+const config = useConfig();
+const locale = computed<string>(() => config.value.locale);
+export default function useLocale(): ComputedRef<string> {
+  return locale;
+}

package/srl/composables/menu.ts

@@ -0,0 +1,101 @@
+/**
+ * `src/composables/menu.ts`
+ *
+ * A Vue 3 composable that provides functionality for processing menu structures
+ * and using them in navigation components.
+ *
+ * ## Functionality
+ * - Converts menu objects from configuration into navigation elements
+ * - Automatically detects active menu items based on the current route
+ * - Supports different menu types: Articles, internal and external links
+ * - Handles recursively nested submenus
+ * - Implements caching for already created menus
+ *
+ * ## Data Types
+ * - `NsWowMenu`: Input type for menu elements from configuration
+ *   - Contains `label`, `type`, `page`, `url`, `submenuEntries`
+ * - `NsWowNavigationItem`: Output type for navigation elements
+ *   - Contains `label`, `type`, `href`, `active`, `children`
+ *
+ * ## Main Functions
+ * - `buildNav()`: Internal function to convert menu items into navigation elements
+ * - `useMenu(name)`: Main function that returns a computed menu based on its name
+ *   - Parameter: `name` - String, the name of the menu in the configuration
+ *   - Returns: Computed reference to an array of navigation elements
+ *
+ * ## Usage
+ * const menu = useMenu('mainMenu')
+ *
+ */
+import { computed, type ComputedRef } from 'vue';
+import {
+  type RouteLocationNormalizedLoadedGeneric,
+  useRoute,
+} from 'vue-router';
+import { isRouterPath } from '#utils/uri';
+import useConfig from './config';
+
+const config = useConfig();
+const menus = {};
+
+function buildNav(
+  item: NsWowMenu,
+  route: RouteLocationNormalizedLoadedGeneric,
+): NsWowNavigationItem {
+  const res: NsWowNavigationItem = {
+    label: item.label,
+    active: false,
+  };
+
+  if (item.type === 'Article') {
+    const page = config.value.articles[config.value.locale].find(
+      (i) => i.uuid === item.page,
+    );
+    if (page) {
+      res.href = `/${config.value.locale}/${page.slug}`;
+      res.active = route.path === res.href;
+    }
+  } else if (item.url && item.type === 'ExternalLink') {
+    if (isRouterPath(item.url)) {
+      res.href = item.url.startsWith('.') ? item.url.substring(1) : item.url;
+      res.active = route.path === res.href;
+    } else {
+      res.href = item.url;
+    }
+  }
+
+  if (item.submenuEntries) {
+    res.children = [];
+    item.submenuEntries?.forEach((subItem) => {
+      const subMenu = buildNav(subItem, route);
+      if (subMenu.active) {
+        res.active = true;
+      }
+      res.children?.push(subMenu);
+    });
+  }
+
+  return res;
+}
+
+export default function useMenu(
+  name: string,
+): ComputedRef<NsWowNavigationItem[]> {
+  if (menus[name]) {
+    return menus[name];
+  } else {
+    try {
+      const route = useRoute();
+      menus[name] = computed<NsWowNavigationItem[]>(() => {
+        return config.value.menus[config.value.locale][name].map((item) => {
+          return buildNav(item, route);
+        });
+      });
+
+      return menus[name];
+    } catch (e) {
+      console.error(e);
+      return computed<NsWowNavigationItem[]>(() => []);
+    }
+  }
+}

package/srl/composables/root.ts

@@ -0,0 +1,5 @@
+import SrlPageApp from '#components/Srl/Page/App.vue';
+
+export default function useRoot(): typeof SrlPageApp {
+  return window.app._instance.root.setupState;
+}

package/srl/composables/search.ts

@@ -0,0 +1,108 @@
+/**
+ * `search.ts`
+ *
+ * This Vue 3 composable provides search functionality across localized article content.
+ * It builds a search index by extracting text from HTML content of articles and
+ * implements a singleton pattern to ensure efficient data loading.
+ *
+ * ## Imports
+ * - `computed`, `ref`: Vue reactivity utilities for state management
+ * - `useConfig`: Composable for accessing application configuration
+ * - `useArticles`: Composable for accessing localized article data
+ * - `node-html-parser`: Library for HTML parsing and manipulation
+ *
+ * ## Variables
+ * - `storage`: Reference object storing search data for all languages
+ * - `computedStorage`: Singleton computed reference for current locale's search data
+ *
+ * ## Helper Functions
+ * - `findByTag()`: Recursively finds HTML elements with specified tag names
+ * - `makeWords()`: Extracts and normalizes text content from specific HTML tags
+ *   for search indexing (h1, h2, h3, p elements)
+ *
+ * ## Function: useSearch
+ * - Asynchronous function that builds and returns a search index
+ * - Loads article HTML content on first call for the current locale
+ * - Processes HTML to extract searchable text
+ * - Builds an array of search items with article metadata and content
+ * - Returns a computed reference that always reflects the current locale
+ *
+ * ## Return Value
+ * - ComputedRef<NsWowSearchList[]>: A computed reference to an array of search items
+ *   for the current locale
+ *
+ * ## Usage Example
+ * ```typescript
+ * const searchIndex = await useSearch()
+ * console.log(searchIndex.value) // Array of search items for the current locale
+ */
+import { computed, type ComputedRef, ref } from 'vue';
+import { HTMLElement, parse as parseHtml } from 'node-html-parser';
+
+const storage = ref<{
+  [locale: string]: NsWowSearchList[];
+}>();
+let computedStorage: ComputedRef<NsWowSearchList[]>;
+
+function findByTag(
+  node: HTMLElement,
+  tagName: string,
+  tagsScope: HTMLElement[] = [],
+) {
+  if (!node.querySelectorAll) return tagsScope;
+  const nodes: HTMLElement[] = node.querySelectorAll(tagName);
+  tagsScope.push(...nodes);
+  if (node.closest(tagName) == node) {
+    tagsScope.push(node);
+  }
+  return tagsScope;
+}
+
+function makeWords(html: string) {
+  const tagsToSearch = ['h1,h2,h3,p'];
+  const rootObject = parseHtml(html);
+  return tagsToSearch
+    .flatMap((tag) => findByTag(rootObject, tag))
+    .map((el) => el.innerText)
+    .join(' ')
+    .replace(/\s{2,}/g, ' ');
+}
+
+export default async function useSearch(): ComputedRef<NsWowSearchList[]> {
+  const config = useConfig();
+  if (!storage.value || !storage.value[config.value.locale]) {
+    !storage.value ? (storage.value = {}) : null;
+    storage.value[config.value.locale] = [];
+
+    const articles = useArticles();
+
+    for (const article of articles.value.filter(
+      (item) => !item.ignoreInSearch,
+    )) {
+      const file = `./html/${config.value.locale}/${article.name}.html`;
+      try {
+        const response = await fetch(file);
+        const htmlContent = await response.text();
+
+        storage.value[config.value.locale].push({
+          article: article,
+          href: `/${config.value.locale}/${article.slug}`,
+          words: makeWords(htmlContent),
+        });
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }
+
+  if (!computedStorage) {
+    computedStorage = computed<NsWowSearchList[]>(() => {
+      if (!storage.value || !storage.value[config.value.locale]) {
+        return [];
+      }
+      return storage.value[config.value.locale];
+    });
+  }
+
+  return computedStorage;
+}

package/srl/composables/settings.ts

@@ -0,0 +1,9 @@
+import useConfig from './config';
+import { computed, type ComputedRef } from 'vue';
+
+const config = useConfig();
+
+const settings = computed<NsWowSettings>(() => config.value.settings);
+export default function useSettings(): ComputedRef<NsWowSettings> {
+  return settings;
+}

package/srl/composables/viewPort.ts

@@ -0,0 +1,78 @@
+/**
+ * `viewPort.ts`
+ *
+ * This Vue 3 composable provides responsive viewport detection based on configured breakpoints.
+ * It creates a reactive reference to the current viewport size category and updates automatically
+ * when the window is resized.
+ *
+ * ## Imports
+ * - `grid` from configuration: Contains breakpoint definitions
+ * - `computed`, `ref`: Vue reactivity utilities
+ *
+ * ## Types
+ * - `Breakpoints`: Type definition for breakpoint configuration (key-value pairs)
+ * - `ViewPorts`: Type definition for the returned viewport information object
+ *
+ * ## Reactive State
+ * - `innerWidth`: Ref tracking the current window width
+ * - `viewPorts`: Computed value that determines the current viewport category
+ *   based on the window width and configured breakpoints
+ *
+ * ## Event Handling
+ * - Adds a window resize event listener to update the innerWidth ref when the window size changes
+ *
+ * ## Function: useViewPort
+ * - Returns a computed object containing:
+ *   - `breakPoints`: The configured breakpoint values
+ *   - `innerWidth`: Current window width
+ *   - `viewPort`: Current viewport category name (or null if no matching breakpoint)
+ *
+ * ## Return Value
+ * - ComputedRef<ViewPorts>: A computed reference to the viewport information
+ *
+ * ## Usage Example
+ * ```typescript
+ * const viewport = useViewPort()
+ * console.log(viewport.value.viewPort) // Current viewport category (e.g., "sm", "md", "lg")
+ * console.log(viewport.value.innerWidth) // Current window width in pixels
+ */
+import { grid } from '~/srl.config.json';
+import { computed, ref, type ComputedRef } from 'vue';
+
+type Breakpoints = {
+  [key: string]: number;
+};
+
+type ViewPorts = {
+  breakPoints: Breakpoints;
+  innerWidth: number;
+  viewPort: string | null;
+};
+
+const { breakpoints } = grid;
+const innerWidth = ref<number>(window.innerWidth);
+
+const viewPorts = computed<ViewPorts>(() => {
+  const res: ViewPorts = {
+    breakPoints: breakpoints,
+    innerWidth: window.innerWidth,
+    viewPort: null,
+  };
+
+  for (const key in breakpoints) {
+    if (breakpoints[key] <= innerWidth.value) {
+      res.viewPort = key;
+    } else {
+      break;
+    }
+  }
+  return res;
+});
+
+window.addEventListener('resize', () => {
+  innerWidth.value = window.innerWidth;
+});
+
+export default function useViewPort(): ComputedRef<ViewPorts> {
+  return viewPorts;
+}

package/srl/plugins/asyncLdComponent.ts

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

package/srl/plugins/initProject.ts

@@ -0,0 +1,19 @@
+import { setConfig } from '#composables/config';
+import { createApp } from 'vue';
+import { initI18n } from '@/i18n';
+import srlVuePlugin from '#plugins/vueSrlPlugin';
+
+import '#imports/app.scss';
+
+import SrlPageApp from '#components/Srl/Page/App.vue';
+import router from '@/router';
+
+export default async function initProject() {
+  await setConfig();
+  const i18n = initI18n();
+  const app = (window.app = createApp(SrlPageApp));
+  app.use(i18n);
+  app.use(router);
+  app.use(srlVuePlugin);
+  return app;
+}