@simple-reporting/base 0.1.112 → 1.0.1

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

package/srl/plugins/viteSrlPlugin.ts

@@ -0,0 +1,214 @@
+import { type Plugin } from 'vite';
+import { fileURLToPath, URL } from 'node:url';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path/posix';
+import { execSync } from 'node:child_process';
+import folders from '@simple-reporting/base/scripts/folders.js';
+import { beaver } from '@simple-reporting/base/scripts/beaver.js';
+import { packageName } from '@simple-reporting/base/scripts/config';
+import { updatePackageJson, updateLivingDocsJson, updateNsWowJson } from '@simple-reporting/base/scripts/utils';
+import {
+  map,
+  mapLdd,
+  mapJs,
+  mapScss,
+} from '@simple-reporting/base/scripts/build.js';
+import chalk from 'chalk';
+
+const msgBoxLength = 60;
+
+function centerText(text: string): string {
+  const padding = Math.max(0, (msgBoxLength - text.length) / 2);
+  return (
+    ' '.repeat(Math.floor(padding)) + text + ' '.repeat(Math.ceil(padding))
+  );
+}
+
+function checkSrlVersion() {
+  try {
+    const pkgPath = join(folders.packagePath, 'package.json');
+    const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'));
+    const current = pkg.version;
+    if (!current) return;
+
+    const tag = `v${current.split('.')[0]}-lts`;
+
+    const latest = execSync(`npm view ${packageName}@${tag} version`)
+      .toString()
+      .trim();
+
+    if (current < latest) {
+      console.log('');
+      console.log(chalk.bgWhiteBright(centerText('')));
+      console.log(
+        chalk.bgWhiteBright.redBright.bold(centerText('Attention !!!')),
+      );
+      console.log(
+        chalk.bgWhiteBright.black.bold(
+          centerText(`New ${packageName} version available.`),
+        ),
+      );
+      console.log(
+        chalk.bgWhiteBright.black.bold(
+          centerText(`Update: ${current} => ${latest}`),
+        ),
+      );
+      console.log(
+        chalk.bgWhiteBright.black.bold(
+          centerText(`Run: npm update -S ${packageName}`),
+        ),
+      );
+      console.log(chalk.bgWhiteBright(centerText('')));
+      console.log('');
+    }
+  } catch (e) {}
+}
+
+let timer: NodeJS.Timeout | null = null;
+
+function triggerAction(callback) {
+  !timer || clearTimeout(timer);
+  timer = setTimeout(async () => {
+    await callback();
+  }, 200);
+}
+
+async function startActions() {
+  checkSrlVersion();
+  await beaver(0);
+  await map();
+  await mapJs();
+}
+
+export default function viteSrlPlugin(): Plugin {
+  return {
+    name: 'vite-srl-plugin',
+    config(config) {
+      startActions();
+
+      config.base = './';
+
+      config.resolve = config.resolve || {};
+      config.resolve.alias['~'] = fileURLToPath(
+        new URL('../..', import.meta.url),
+      );
+      config.resolve.alias['@'] = fileURLToPath(
+        new URL('../../src', import.meta.url),
+      );
+      config.resolve.alias['#components'] = fileURLToPath(
+        new URL('../components', import.meta.url),
+      );
+      config.resolve.alias['#composables'] = fileURLToPath(
+        new URL('../composables', import.meta.url),
+      );
+      config.resolve.alias['#plugins'] = fileURLToPath(
+        new URL('../plugins', import.meta.url),
+      );
+      config.resolve.alias['#types'] = fileURLToPath(
+        new URL('../types', import.meta.url),
+      );
+      config.resolve.alias['#utils'] = fileURLToPath(
+        new URL('../utils', import.meta.url),
+      );
+      config.resolve.alias['#imports'] = fileURLToPath(
+        new URL('../imports', import.meta.url),
+      );
+      config.resolve.alias['#ld'] = fileURLToPath(
+        new URL('../../livingdocs', import.meta.url),
+      );
+      config.resolve.alias['assets'] = fileURLToPath(
+        new URL('../../src/assets', import.meta.url),
+      );
+      config.resolve.alias['srl'] = fileURLToPath(
+        new URL('../srl', import.meta.url),
+      );
+      config.resolve.alias['vue'] = 'vue/dist/vue.esm-bundler.js';
+    },
+    configureServer(server) {
+      const fontPath = join(folders.srlAssets, 'fonts');
+
+      server.watcher.on('change', async (path) => {
+        if (path.endsWith('/package.json')) {
+          await updatePackageJson();
+        }
+        if (path.endsWith('/livingdocs.config.json')) {
+          await updateLivingDocsJson();
+        }
+        if (path.endsWith('/srl.config.json')) {
+          await updateNsWowJson();
+          triggerAction(beaver);
+        }
+      });
+
+      server.watcher.on('add', (path) => {
+        if (
+          path.endsWith('/general.scss') ||
+          path.endsWith('/app.scss') ||
+          path.endsWith('/ldd.scss') ||
+          path.endsWith('/editor.scss') ||
+          path.endsWith('/pdf.scss') ||
+          path.endsWith('/word.scss') ||
+          path.endsWith('/xbrl.scss') ||
+          (
+            path.startsWith(fontPath) &&
+            path.endsWith('.scss')
+          )
+        ) {
+          triggerAction(mapScss);
+        }
+
+        if (
+          path.includes('livingdocs') &&
+          (path.endsWith('/app.js') || path.endsWith('/app.ts'))
+        ) {
+          triggerAction(mapJs);
+        }
+
+        if (
+          path.includes('livingdocs') &&
+          (path.endsWith('/properties.json') ||
+            path.endsWith('/properties.ts') ||
+            path.endsWith('/properties.js') ||
+            path.endsWith('.vue'))
+        ) {
+          triggerAction(mapLdd);
+        }
+      });
+
+      server.watcher.on('unlink', (path) => {
+        if (
+          path.endsWith('/general.scss') ||
+          path.endsWith('/app.scss') ||
+          path.endsWith('/ldd.scss') ||
+          path.endsWith('/editor.scss') ||
+          path.endsWith('/pdf.scss') ||
+          path.endsWith('/word.scss') ||
+          path.endsWith('/xbrl.scss')||
+          (
+            path.startsWith(fontPath) &&
+            path.endsWith('.scss')
+          )
+        ) {
+          triggerAction(mapScss);
+        }
+
+        if (
+          path.includes('livingdocs') &&
+          (path.endsWith('/app.js') || path.endsWith('/app.ts'))
+        ) {
+          triggerAction(mapJs);
+        }
+
+        if (
+          path.includes('livingdocs') &&
+          (path.endsWith('/properties.json') ||
+            path.endsWith('/properties.ts') ||
+            path.endsWith('/properties.js') ||
+            path.endsWith('.vue'))
+        ) {
+          triggerAction(mapLdd);
+        }
+      });
+    },
+  };
+}

package/srl/plugins/vueSrlPlugin.ts

@@ -0,0 +1,23 @@
+import { defineComponent, type App } 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 asyncLdComponent from './asyncLdComponent.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));
+    asyncLdComponent(app);
+  },
+};

package/srl/scss/config.scss

@@ -0,0 +1,7 @@
+@use 'system/variables' as systemVariables;
+@use 'meta/variables' as metaVariables;
+@use 'grid/variables' as gridVariables;
+@use 'colors/variables' as colorsVariables;
+@use 'typography/variables' as typographyVariables;
+@use 'spacer/variables' as spacerVariables;
+@use 'helpers/variables' as helpersVariables;

package/{scss → srl/scss}/core-styles.scss

@@ -1,3 +1,4 @@
+@use 'config';
 @use 'index';
 @use 'system/root';
 

package/{scss → srl/scss}/grid/functions.scss

@@ -27,3 +27,23 @@
 @function get-gutter-column-gap() {
   @return var(--#{variables.$variable-prefix}gutter-column-gap);
 }
+
+@function calculate-pdf-col-span-minus-one-gutter($span) {
+  $gaps-inside: $span - 1;
+  $columns: map.get(variables.$columns, print);
+  $gutter: get-gutter-column-gap();
+
+  @return calc(
+          ((100% - (#{$columns - 1} * #{$gutter})) * #{$span} / #{$columns}) + (#{$gaps-inside} * #{$gutter})
+  );
+}
+
+@function calculate-pdf-col-span-plus-one-gutter($span) {
+  $gaps-inside: $span + 1;
+  $columns: map.get(variables.$columns, print);
+  $gutter: get-gutter-column-gap();
+
+  @return calc(
+          ((100% - (#{$columns - 1} * #{$gutter})) * #{$span} / #{$columns}) + (#{$gaps-inside} * #{$gutter})
+  );
+}