@simple-reporting/base 1.0.14 → 1.0.15

package/dev/package.json

@@ -19,7 +19,7 @@
     "postinstall": "srl prepare"
   },
   "dependencies": {
-    "@simple-reporting/base": "^1.0.14",
+    "@simple-reporting/base": "^1.0.15",
     "axios": "^1.12.2",
     "chalk": "^5.6.2",
     "exceljs": "^4.4.0",

package/livingdocs/040.Media/010.table/table/download.vue

@@ -0,0 +1,494 @@
+<script setup lang="ts">
+/**
+ * This Vue component script enables downloading an HTML table as an Excel file.
+ * It uses the `exceljs` library to convert the table into an Excel format and trigger the download.
+ *
+ * ## Props:
+ * - `titleSelector` (string, optional): CSS selector for the table titles. Default: `.srl-title-h1__text, .srl-page-title__overline, .srl-page-title__headline`.
+ * - `font` (string, optional): Font used in the Excel file. Default: `Arial`.
+ * - `defaultSheetName` (string, optional): Default name of the Excel worksheet. Default: `Table 1`.
+ * - `defaultFileName` (string, optional): Default name of the downloaded file. Default: `Table`.
+ * - `spacerRowHeight` (number, optional): Height of spacer rows in the Excel file. Default: `25`.
+ * - `formatText` (Function, optional): Function to format cell content. Default: Trims text and returns `null` if empty.
+ *
+ * ## Types:
+ * - `FormatText`: Type for the `formatText` function.
+ * - `ElementStyles`: Style properties of an HTML element.
+ * - `TextData`: Text data with styles.
+ * - `CellData`: Data and styles of a table cell.
+ * - `CellStyles`: Styles of a table cell.
+ * - `TableIdElement`: HTML div element with a `data-tableid` attribute.
+ * - `TableMatrix`: Matrix representing the table structure.
+ *
+ * ## Functions:
+ * - `downloadTable()`: Initiates the download of the table as an Excel file.
+ * - `parseColumns(worksheet: Worksheet)`: Parses the column widths of the table and sets them in the worksheet.
+ * - `parseTitles()`: Extracts the table titles and their styles.
+ * - `writeTitles(worksheet: Worksheet, titles: TextData[])`: Writes the titles to the worksheet.
+ * - `parseTable()`: Converts the HTML table into a matrix of cells.
+ * - `writeTable(worksheet: Worksheet, matrix: TableMatrix)`: Writes the table matrix to the worksheet.
+ * - `mergeCells(worksheet: Worksheet, matrix: TableMatrix, excelRows: Row[])`: Merges cells with `rowSpan` or `colSpan`.
+ * - `parseFootNotes()`: Extracts footnotes from the table.
+ * - `writeFootNotes(worksheet: Worksheet, footNotes: TextData[])`: Writes the footnotes to the worksheet.
+ * - `triggerDownload(fileName: string, buffer: ArrayBuffer)`: Triggers the download of the Excel file.
+ * - `writeSpacerRow(worksheet: Worksheet)`: Adds a spacer row to the worksheet.
+ * - `parseElementStyles(element: HTMLElement)`: Parses the styles of an HTML element.
+ * - `rgbToArgb(rgb: string, alpha: number)`: Converts an RGB color to ARGB format.
+ * - `getStyles(tableCell: HTMLTableCellElement)`: Extracts the styles of a table cell.
+ *
+ * ## Usage:
+ * This component is used to export an HTML table to an Excel file.
+ * It can be integrated into a Vue application and provides a button to trigger the export.
+ */
+import { ref, watch } from 'vue'
+import { Workbook } from 'exceljs'
+import type { Worksheet, Row } from 'exceljs/index.d.ts'
+
+const props = withDefaults(defineProps<{
+  component?: HTMLDivElement
+  tableSelector?: string
+  titleSelector?: string
+  buttonLabel?: string
+  buttonTitle?: string
+  buttonDescription?: string
+  font?: string
+  defaultSheetName?: string
+  defaultFileName?: string
+  spacerRowHeight?: number
+  formatText?: FormatText
+}>(),{
+  tableSelector: 'table',
+  titleSelector: '.srl-title-h1__text, .srl-page-title__overline, .srl-page-title__headline',
+  buttonLabel: 'Download',
+  buttonDescription: 'Download table as Excel file',
+  font: 'Arial',
+  defaultSheetName: 'Table 1',
+  defaultFileName: 'Table',
+  spacerRowHeight: 25,
+  formatText: (cell: HTMLTableCellElement) => {
+    return cell.innerText !== '' ? cell.innerText.trim() : null
+  }
+})
+
+type FormatText = (cell: HTMLTableCellElement) => string | null
+
+type ElementStyles = {
+  name: string,
+  size: number,
+  color: string,
+  bold: boolean
+}
+
+interface TextData extends ElementStyles {
+  value: string
+}
+
+type CellData = {
+  value: string | null,
+  styles: CellStyles,
+  colSpan: number,
+  rowSpan: number
+}
+
+type CellStyles = {
+  alignment: {
+    horizontal: string,
+    vertical: string,
+    wrapText: boolean
+  },
+  border: {
+    top?: { style: string, color: { argb: string } },
+    right?: { style: string, color: { argb: string } },
+    bottom?: { style: string, color: { argb: string } },
+    left?: { style: string, color: { argb: string } }
+  },
+  font: {
+    name: string,
+    size: number,
+    color: { argb: string },
+    bold: boolean
+  },
+  fill: {
+    type?: string,
+    pattern?: string,
+    fgColor?: { argb: string }
+  }
+}
+
+type TableIdElement = HTMLDivElement & {
+  dataset: {
+    tableid: string
+  }
+}
+
+type TableMatrix = Array<Array<CellData>>
+
+const rootElement = ref<HTMLDivElement>()
+const table = ref<HTMLTableElement | null | undefined>(null)
+
+watch(
+  props,
+  to => {
+    !to.component || init(to.component)
+  }
+)
+
+function init(componentEl: HTMLDivElement | undefined) {
+  if (!componentEl) return
+  rootElement.value = componentEl
+  table.value = componentEl.querySelector(props.tableSelector) as HTMLTableElement
+}
+
+function getTable(): Promise<HTMLTableElement | null | undefined> {
+  return new Promise((resolve, reject) => {
+    let attempts = 0;
+    const checkTable = () => {
+      const table = rootElement.value?.querySelector<HTMLTableElement>('table');
+      if (table) {
+        resolve(table);
+      } else if (attempts >= 30) {
+        reject(new Error('Table not found within the maximum number of attempts.'));
+      } else {
+        attempts++;
+        setTimeout(checkTable, 10);
+      }
+    };
+
+    checkTable();
+  })
+}
+
+async function downloadTable() {
+  if (!table.value) return
+
+  const matrix = parseTable()
+  const titles = parseTitles()
+  const footNotes = parseFootNotes()
+  const fileName = titles.map(t => t.value)
+
+  const headTop: HTMLTableCellElement | null | undefined = rootElement.value?.querySelector('.head_top')
+  if (headTop && headTop.textContent) {
+    fileName.push(headTop.textContent.trim())
+  }
+
+  const tableIdElement = rootElement.value?.querySelector('[data-tableid]') as TableIdElement | null
+
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet( tableIdElement?.dataset.tableid || props.defaultSheetName )
+
+  parseColumns(worksheet)
+
+  writeTitles(worksheet, titles)
+  mergeCells(worksheet, matrix, writeTable(worksheet, matrix))
+  writeFootNotes(worksheet, footNotes)
+
+  triggerDownload(
+    fileName.length ? fileName.join(' - ').replaceAll(' ', '_') : props.defaultFileName,
+    await workbook.xlsx.writeBuffer()
+  )
+}
+
+function parseColumns(worksheet: Worksheet): void {
+  worksheet.columns = Array.from(table.value?.querySelectorAll('col') ?? [])
+    .map(col => {
+      return {
+        width: col.offsetWidth / 7
+      }
+    })
+}
+
+function parseTitles(): TextData[] {
+  const titleElements: HTMLElement[] = Array.from(document.querySelectorAll(props.titleSelector)) as HTMLElement[]
+  const tableTitle: TextData[] = []
+  titleElements.forEach( element => {
+    if (!element || !element.textContent) return
+    const styles = parseElementStyles(element)
+    tableTitle.push(Object.assign({
+      value: element.textContent.trim(),
+    }, styles))
+  })
+  return tableTitle
+}
+
+function writeTitles( worksheet: Worksheet, titles: TextData[] ): void {
+  if (titles.length === 0) return
+
+  titles.forEach( title => {
+    const row = worksheet.addRow([title.value])
+    const cell = row.getCell(1)
+    cell.font = {
+      name: title.name,
+      size: title.size,
+      color: { argb: title.color },
+      bold: title.bold
+    }
+    cell.alignment = {
+      wrapText: true
+    }
+    worksheet.mergeCells(row.number, 1, row.number, worksheet.columns.length)
+  })
+
+  //writeSpacerRow(worksheet)
+}
+
+function parseTable(): TableMatrix  {
+  if (!table.value) return []
+
+  const matrix: TableMatrix = []
+
+  const tableRows = Array.from(table.value.querySelectorAll('tr'))
+
+  tableRows?.forEach( tableRowElem => {
+    const row: CellData[] = []
+    const tableCells: HTMLTableCellElement[] = Array.from(tableRowElem.querySelectorAll('th, td'))
+
+    tableCells.forEach( tableCellElem => {
+
+      const styles = getStyles(tableCellElem)
+
+      row.push({
+        value: props.formatText(tableCellElem),
+        styles: styles,
+        colSpan: tableCellElem.colSpan,
+        rowSpan: tableCellElem.rowSpan,
+      })
+
+      if (tableCellElem.colSpan > 1) {
+        for (let i = 1; i < tableCellElem.colSpan; i++) {
+          row.push({
+            value: null,
+            styles: styles,
+            colSpan: 1,
+            rowSpan: 1
+          })
+        }
+      }
+    })
+
+    matrix.push(row)
+  })
+
+  matrix.forEach( (row, rowIndex) => {
+    row.forEach( (cell) => {
+      const cellIndex = row.findIndex(c => c === cell)
+      if (cell.rowSpan > 1) {
+        for (let i = 1; i < cell.rowSpan; i++) {
+          const nextRow = matrix[rowIndex + i]
+          if (nextRow) {
+            for (let i = 0; i < cell.colSpan; i++) {
+              nextRow.splice(cellIndex, 0, {
+                value: null,
+                styles: cell.styles,
+                colSpan: 1,
+                rowSpan: 1
+              })
+            }
+          }
+        }
+      }
+    })
+  })
+
+  return matrix
+}
+
+function writeTable( worksheet: Worksheet, matrix: TableMatrix ): Row[] {
+  const excelRows: Row[] = []
+  matrix.forEach( row => {
+    const excelRow = worksheet.addRow(row.map(cell => cell.value))
+    row.forEach( (cell, index) => {
+      const excelCell = excelRow.getCell(index + 1)
+
+      excelCell.alignment = cell.styles.alignment
+      excelCell.font = cell.styles.font
+      cell.styles.fill ? excelCell.fill = cell.styles.fill : null
+      excelCell.border = cell.styles.border
+    })
+    excelRows.push(excelRow)
+  })
+  return excelRows
+}
+
+function mergeCells( worksheet: Worksheet, matrix: TableMatrix, excelRows: Row[] ): void {
+  matrix.forEach( (row, rowIndex) => {
+    row.forEach( (cell, cellIndex) => {
+      if (cell.rowSpan > 1 || cell.colSpan > 1) {
+        const excelRow = excelRows[rowIndex]
+        const startCell = cellIndex + 1
+        const endCell = cellIndex + cell.colSpan
+        const endRow = excelRow.number + ( cell.rowSpan - 1 )
+        worksheet.mergeCells(excelRow.number, startCell, endRow, endCell)
+      }
+    })
+  })
+}
+
+function parseFootNotes(): TextData[] {
+  const footNoteData: TextData[] = []
+  const footNotes = Array.from(rootElement.value?.querySelectorAll('.srl-footnote') ?? []) as HTMLDivElement[]
+
+  footNotes.forEach(footNote => {
+    const key: HTMLSpanElement | null = footNote.querySelector('.srl-footnote__key')
+    const text: HTMLSpanElement | null = footNote.querySelector('.srl-footnote__text')
+
+    if (text && text.textContent) {
+      const row: string[] = []
+      if (key && key.textContent) {
+        row.push(key.textContent.trim())
+      }
+      row.push(text.textContent.trim())
+      const styles = parseElementStyles(text)
+      footNoteData.push(Object.assign({
+        value: row.join(' '),
+      }, styles))
+    }
+  })
+  return footNoteData
+}
+
+function writeFootNotes( worksheet: Worksheet, footNotes: TextData[] ): void {
+  if (footNotes.length === 0) return
+
+  writeSpacerRow(worksheet)
+
+  footNotes.forEach(footNote => {
+    const row = worksheet.addRow([footNote.value])
+    const cell = row.getCell(1)
+    cell.font = {
+      name: footNote.name,
+      size: footNote.size,
+      color: { argb: footNote.color },
+      bold: footNote.bold
+    }
+    cell.alignment = {
+      horizontal: 'left',
+      vertical: 'top',
+      wrapText: true
+    }
+    worksheet.mergeCells(row.number, 1, row.number, worksheet.columns.length)
+  })
+}
+
+function triggerDownload( fileName: string, buffer: ArrayBuffer ): void {
+  const blob = new Blob([buffer], {
+    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  })
+  const link = document.createElement('a')
+  link.href = URL.createObjectURL(blob)
+  link.download = fileName + '.xlsx'
+  link.click()
+  link.remove()
+  URL.revokeObjectURL(link.href)
+}
+
+function writeSpacerRow(worksheet: Worksheet): void {
+  const row = worksheet.addRow([])
+  row.height = props.spacerRowHeight
+  worksheet.mergeCells(row.number, 1, row.number, worksheet.columns.length)
+}
+
+function parseElementStyles(element: HTMLElement): ElementStyles | null {
+  const styles = window.getComputedStyle(element)
+  return {
+    name: props.font,
+    size: parseInt(styles.fontSize) * 0.75,
+    color: rgbToArgb(styles.color),
+    bold: parseInt(styles.fontWeight) > 400
+  }
+}
+
+function rgbToArgb(rgb: string, alpha: number = 1): string {
+  const match = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([0-9.]+))?\)/)
+  if (!match) {
+    throw new Error("Dies ist keine gültige RGB- oder RGBA-Farbe")
+  }
+
+  const r = parseInt(match[1])
+  const g = parseInt(match[2])
+  const b = parseInt(match[3])
+  const a = match[4] !== undefined ? Math.round(parseFloat(match[4]) * 255) : Math.round(alpha * 255)
+
+  const aHex = a.toString(16).padStart(2, '0')
+  const rHex = r.toString(16).padStart(2, '0')
+  const gHex = g.toString(16).padStart(2, '0')
+  const bHex = b.toString(16).padStart(2, '0')
+
+  return `${aHex}${rHex}${gHex}${bHex}`
+}
+
+function getStyles( tableCell: HTMLTableCellElement ): CellStyles {
+  const styles: CellStyles = {
+    alignment: {
+      horizontal: window.getComputedStyle(tableCell).textAlign,
+      vertical: window.getComputedStyle(tableCell).verticalAlign,
+      wrapText: true
+    },
+    border: {},
+    font: {
+      name: 'Arial',
+      size: parseInt(window.getComputedStyle(tableCell).fontSize) * 0.75,
+      color: { argb: rgbToArgb(window.getComputedStyle(tableCell).color) },
+      bold: parseInt(window.getComputedStyle(tableCell).fontWeight) > 400
+    },
+  }
+
+  const brdTopWidth = parseInt(window.getComputedStyle(tableCell).borderTopWidth)
+  if (brdTopWidth) {
+    styles.border.top = {
+      style: brdTopWidth < 3 ? 'thin' : brdTopWidth < 6 ? 'medium' : 'thick',
+      color: {argb: rgbToArgb(window.getComputedStyle(tableCell).borderTopColor)}
+    }
+  }
+
+  const brdRightWidth = parseInt(window.getComputedStyle(tableCell).borderRightWidth)
+  if (brdRightWidth) {
+    styles.border.right = {
+      style: brdRightWidth < 3 ? 'thin' : brdRightWidth < 6 ? 'medium' : 'thick',
+      color: {argb: rgbToArgb(window.getComputedStyle(tableCell).borderRightColor)}
+    }
+  }
+
+  const brdBottomWidth = parseInt(window.getComputedStyle(tableCell).borderBottomWidth)
+  if (brdBottomWidth) {
+    styles.border.bottom = {
+      style: brdBottomWidth < 3 ? 'thin' : brdBottomWidth < 6 ? 'medium' : 'thick',
+      color: {argb: rgbToArgb(window.getComputedStyle(tableCell).borderBottomColor)}
+    }
+  }
+
+  const brdLeftWidth = parseInt(window.getComputedStyle(tableCell).borderLeftWidth)
+  if (brdLeftWidth) {
+    styles.border.left = {
+      style: brdLeftWidth < 3 ? 'thin' : brdLeftWidth < 6 ? 'medium' : 'thick',
+      color: {argb: rgbToArgb(window.getComputedStyle(tableCell).borderLeftColor)}
+    }
+  }
+
+  const bgColor = rgbToArgb(window.getComputedStyle(tableCell).backgroundColor)
+  if (bgColor.substring(0,2) !== '00') {
+    styles.fill = {
+      type: 'pattern',
+      pattern: 'solid',
+      fgColor: {argb: bgColor}
+    }
+  }
+
+  return styles
+}
+
+</script>
+
+<template>
+    <button
+      v-if="table"
+      type="button"
+      :title="$te('table.download.title') ? $t('table.download.title') : props.buttonTitle ?? props.buttonLabel"
+      :aria-label="$te('table.download.label') ? $t('table.download.label') : props.buttonLabel"
+      :aria-description="$te('table.download.description') ? $t('table.download.description') : props.buttonDescription"
+      class="srl-button"
+      @click="downloadTable"
+    >
+      <i class="srl-icon srl-icon-download" aria-hidden="true"></i>
+      <span v-text="$te('table.download.label') ? $t('table.download.label') : props.buttonLabel" />
+    </button>
+</template>

package/livingdocs/040.Media/010.table/table/responsive.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const props = withDefaults(defineProps<{
+  component?: HTMLDivElement
+  containerSelector?: string
+  tableSelector?: string
+}>(), {
+  containerSelector: '.srl-table__container',
+  tableSelector: 'table'
+})
+
+const component = ref<HTMLDivElement>()
+const table = ref<HTMLTableElement>()
+const container = ref<HTMLDivElement>()
+
+watch(
+  props,
+  to => {
+    !to.component || init(to.component)
+  }
+)
+
+function init(componentEl: HTMLDivElement | undefined) {
+  if (!componentEl) return
+  component.value = componentEl
+  table.value = componentEl.querySelector(props.tableSelector) as HTMLTableElement
+  container.value = componentEl.querySelector(props.containerSelector) as HTMLDivElement
+  updateClasses()
+  enableDragScroll()
+  window.addEventListener('resize', updateClasses)
+}
+
+defineExpose({
+  init
+})
+
+function hasHorizontalScrollbar(): boolean {
+  return !table.value || !container.value ?
+    false :
+    table.value?.clientWidth > container.value?.clientWidth
+}
+
+function hasRowSpan() {
+  if (!table.value) return false
+  const tableCells = table.value.querySelectorAll('td[rowspan]')
+  return tableCells.length > 0
+}
+
+function updateClasses() {
+  const hasScroll = hasHorizontalScrollbar()
+  const hasRowspan = hasRowSpan()
+
+  if (hasScroll && !hasRowspan) {
+    component.value?.classList.add('has-shadow', 'responsive-table')
+    component.value?.classList.remove('responsive-table-alternative')
+  } else if (hasScroll && hasRowspan) {
+    component.value?.classList.add('responsive-table-alternative')
+    component.value?.classList.remove('has-shadow', 'responsive-table')
+  } else {
+    component.value?.classList.remove('has-shadow', 'responsive-table', 'responsive-table-alternative')
+  }
+}
+
+function   enableDragScroll() {
+  let isDragging: boolean = false;
+  let startX: number = 0;
+  let scrollLeft: number = 0;
+
+  if (container.value) {
+    container.value.addEventListener('mousedown', (e) => {
+      if (container.value) {
+        isDragging = true;
+        startX = e.pageX - container.value.offsetLeft;
+        scrollLeft = container.value.scrollLeft;
+        container.value.classList.add('dragging');
+      }
+    });
+
+    container.value.addEventListener('mousemove', (e) => {
+      if (container.value) {
+        if (!isDragging) return;
+        e.preventDefault();
+        const x = e.pageX - container.value.offsetLeft;
+        const walk = (x - startX) * 2; // Adjust speed
+        container.value.scrollLeft = scrollLeft - walk;
+      }
+    });
+
+    container.value.addEventListener('mouseup', () => {
+      isDragging = false;
+      container.value?.classList.remove('dragging');
+    });
+
+    container.value.addEventListener('mouseleave', () => {
+      isDragging = false;
+      container.value?.classList.remove('dragging');
+    });
+  }
+}
+</script>
+
+<template>
+</template>

package/livingdocs/040.Media/010.table/table.html

@@ -1,4 +1,4 @@
-<div class="srl-table">
+<srl-ld-table class="srl-table">
   <div class="srl-table__container" doc-include="nswow-table">
     <p class="srl-grid srl-paragraph">
       <span class="srl-grid__inner srl-paragraph__text">
@@ -6,4 +6,4 @@
       </span>
     </p>
   </div>
-</div>
+</srl-ld-table>

package/livingdocs/040.Media/010.table/table.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+
+const props = withDefaults(defineProps<{
+  responsive?: boolean
+  download?: boolean
+}>(), {
+  responsive: false,
+  download: false,
+})
+
+import { ref } from 'vue'
+import TableResponsive from './table/responsive.vue'
+import TableDownload from './table/download.vue'
+
+const component = ref<HTMLDivElement>()
+</script>
+
+<template>
+  <div ref="component">
+    <TableResponsive v-if="props.responsive" :component="component" />
+    <slot/>
+    <div v-if="props.download" class="srl-table__download">
+      <TableDownload :component="component" />
+    </div>
+  </div>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-reporting/base",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "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 = './';
@@ -229,6 +197,13 @@ export default function viteSrlPlugin() {
         ) {
           triggerAction(mapLdd);
         }
+
+        if (
+          path.includes('src/components/Srl') &&
+          path.endsWith('.vue')
+        ) {
+          triggerAction(vueComponents);
+        }
       });
 
       server.watcher.on('unlink', (path) => {
@@ -264,6 +239,13 @@ export default function viteSrlPlugin() {
         ) {
           triggerAction(mapLdd);
         }
+
+        if (
+          path.includes('src/components/Srl') &&
+          path.endsWith('.vue')
+        ) {
+          triggerAction(vueComponents);
+        }
       });
     },
   };

package/scripts/vue/components.d.ts

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

package/scripts/vue/components.js

@@ -0,0 +1,94 @@
+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 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);
+        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(baseDir) && statSync(baseDir).isDirectory()) {
+    search(baseDir);
+  }
+
+  return result;
+}
+
+export async function vueComponents() {
+  const srlComponents = readVueDir(folders.srlRoot, '#');
+  const appComponents = readVueDir(folders.srlSrc, '@/');
+
+  const components = []
+  const types = []
+
+  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
+    components.push(
+      `app.component('${name}', defineAsyncComponent(() => import('${componentPath}')));`,
+    )
+    types.push({
+      name: name,
+      type: `  type ${name} = typeof import('${typePath}')['default'];`,
+    })
+  }
+
+  for (const [name, info] of Object.entries(appComponents)) {
+    if (!srlComponents[name]) {
+      components.push(
+        `app.component('${name}', defineAsyncComponent(() => import('${info.component}')));`,
+      )
+      types.push({
+        name: name,
+        type: `  type ${name} = typeof import('${info.type}')['default'];`,
+      })
+    }
+  }
+
+  writeFileSync(join(folders.srlPlugins, 'asyncSrlComponents.ts'),
+`import { defineAsyncComponent } from 'vue';
+export default function asyncSrlComponents(app) {
+  ${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/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'
 
@@ -187,7 +185,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"
@@ -212,7 +210,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"
@@ -237,7 +235,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"
@@ -265,13 +263,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 })
 
@@ -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/Note/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/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/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 '#components/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 {}
 }

package/srl/types/global.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue'
+export {}
+declare global {
+  interface Window {
+    app: App;
+  }
+}

package/srl/types/nswow.d.ts

@@ -1,6 +1,6 @@
 export {};
 declare global {
-  export type NsWowSettings = {
+  type NsWowSettings = {
     languages: string[];
     defaultLanguage: string;
     shortBreadcrumb: boolean;
@@ -10,7 +10,7 @@ declare global {
     categories: string[];
   };
 
-  export interface NsWowArticle {
+  interface NsWowArticle {
     uuid: string;
     name: string;
     translatedTitle: string;
@@ -23,11 +23,11 @@ declare global {
     status: string;
   }
 
-  export interface NsWowArticles {
+  interface NsWowArticles {
     [locale: string]: NsWowArticle[];
   }
 
-  export type NsWowConfig = {
+  type NsWowConfig = {
     locale: string;
     settings: NsWowSettings;
     articles: NsWowArticles;
@@ -40,15 +40,15 @@ declare global {
     };
   };
 
-  export type NsWowTranslations = {
+  type NsWowTranslations = {
     [locale: string]: NsWowTranslation;
   };
 
-  export type NsWowTranslation = {
+  type NsWowTranslation = {
     [key: string]: string;
   };
 
-  export interface NsWowMenu {
+  interface NsWowMenu {
     label: string;
     type: string;
     page?: string;
@@ -57,11 +57,11 @@ declare global {
     submenuEntries?: NsWowMenu[];
   }
 
-  export interface NsWowMenus {
+  interface NsWowMenus {
     [menu: string]: NsWowMenu[];
   }
 
-  export interface NsWowResponseRouting {
+  interface NsWowResponseRouting {
     version: string;
     pages: NsWowArticle[];
     menu: {
@@ -69,7 +69,7 @@ declare global {
     };
   }
 
-  export interface NsWowDownload {
+  interface NsWowDownload {
     type: string;
     title: string;
     fileType: string;
@@ -77,19 +77,19 @@ declare global {
     artifact: string;
   }
 
-  export type NsWowDownloads = {
+  type NsWowDownloads = {
     version?: string;
     structure: NsWowDownload[];
     annualReport?: NsWowDownload;
   };
 
-  export type NsWowSearchList = {
+  type NsWowSearchList = {
     article: NsWowArticle;
     href: string;
     words: string;
   };
 
-  export type NsWowNavigationItem = {
+  type NsWowNavigationItem = {
     label: string;
     title?: string;
     icon?: string;
@@ -116,7 +116,7 @@ declare global {
     children?: NsWowNavigationItem[];
   };
 
-  export type NsWowPageData = {
+  type NsWowPageData = {
     time: number;
     article: NsWowArticle | null;
     content: string;