@simple-reporting/base 1.0.13 → 1.0.15

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/livingdocs/040.Media/030.video/ld-conf.json

@@ -3,7 +3,7 @@
   "label": "Video",
   "properties": ["width-all", "pdf-spacer"],
   "directives": {
-    "background": {
+    "video-thumbnail": {
       "imageRatios": ["16:9"],
       "allowOriginalRatio": false
     },

package/livingdocs/100.Misc/010.anchor/anchor.html

@@ -1,11 +1,8 @@
-<p class="srl-anchor" data-is-anchor="true">
-  <span class="srl-anchor__editor-text" data-remove-from-pdf="complete">
-    Anchor:
-  </span>
-  <span class="srl-anchor__text" doc-editable="anchor-text">
+<p class="srl-anchor srl-editor-component" data-is-anchor="true">
+  <span class="srl-anchor__text srl-editor-component__text" doc-editable="anchor-text">
     Must start with a letter (A–Z or a–z); a number is not allowed. After the
     first letter, any combination of letters (a–z, A–Z), digits (0–9), hyphens
     (-), underscores (_), colons (:), and periods (.) is allowed. The ID must be
     unique and is case-sensitive.
   </span>
-</p>
+</p>

package/livingdocs/100.Misc/010.anchor/scss/editor.scss

@@ -2,18 +2,7 @@
 @use 'web';
 @use 'assets/scss/placeholders';
 
-.srl-anchor {
-  border-top: 1px solid #{srl.colors-secondary-1000()};
-  border-bottom: 1px solid #{srl.colors-secondary-1000()};
-  @include srl.spacer-padding-block(200);
-  @extend %srl-grid-base;
-}
-
-.srl-anchor__editor-text {
-  @extend %srl-regular-width;
-}
-
 .srl-anchor__text {
   @extend %srl-regular-width;
   @include srl.typography-pdf-header()
-}
+}

package/livingdocs/110.PDF/010.pdf-pagebreak/pdf-pagebreak.html

@@ -1,5 +1,5 @@
-<div class="srl-pdf-pagebreak" data-remove-from-web="complete">
-  <span class="srl-pdf-pagebreak__editor-text" data-remove-from-pdf="complete">
+<div class="srl-pdf-pagebreak srl-editor-component" data-remove-from-web="complete">
+  <span class="srl-pdf-pagebreak__editor-text srl-editor-component__text" data-remove-from-pdf="complete">
     PDF page break
   </span>
 </div>

package/livingdocs/110.PDF/010.pdf-pagebreak/scss/editor.scss

@@ -3,18 +3,10 @@
 @use 'assets/scss/placeholders';
 
 .srl-pdf-pagebreak {
-  border-top: 1px solid #{srl.colors-secondary-1000()};
-  border-bottom: 1px solid #{srl.colors-secondary-1000()};
   text-align: center;
-  @include srl.spacer-padding-block(200);
-  @extend %srl-grid-base;
 }
 
 .srl-pdf-pagebreak__editor-text {
   @include srl.typography-editor-label-text();
   @extend %srl-regular-width;
-}
-
-.srl-pdf-pagebreak__text {
-  @extend %srl-regular-width;
 }

package/livingdocs/110.PDF/030.pdf-publication-title/pdf-publication-title.html

@@ -1,11 +1,8 @@
 <p
-  class="srl-pdf-publication-title"
+  class="srl-pdf-publication-title srl-editor-component"
   data-remove-from-web="complete"
 >
-  <span class="srl-pdf-publication-title__editor-text" data-remove-from-pdf="complete">
-    PDF publication title:
-  </span>
-  <span class="srl-pdf-publication-title__text" doc-editable="pdf-publication-titletext">
+  <span class="srl-pdf-publication-title__text srl-editor-component__text" doc-editable="pdf-publication-titletext">
     Publication title
   </span>
 </p>

package/livingdocs/110.PDF/030.pdf-publication-title/scss/editor.scss

@@ -2,17 +2,6 @@
 @use 'web';
 @use 'assets/scss/placeholders';
 
-.srl-pdf-publication-title {
-  border-bottom: 1px solid #{srl.colors-primary-1000()};
-  @include srl.spacer-padding-block(200);
-  @extend %srl-grid-base;
-}
-
-.srl-pdf-publication-title__editor-text {
-  @include srl.typography-editor-label-text();
-  @extend %srl-regular-width;
-}
-
 .srl-pdf-publication-title__text {
   @extend %srl-regular-width;
 }

package/livingdocs/110.PDF/040.pdf-chapter-title/pdf-chapter-title.html

@@ -1,11 +1,8 @@
 <p
-  class="srl-pdf-chapter-title"
+  class="srl-pdf-chapter-title srl-editor-component"
   data-remove-from-web="complete"
 >
-  <span class="srl-pdf-chapter-title__editor-text" data-remove-from-pdf="complete">
-    PDF chapter title:
-  </span>
-  <span class="srl-pdf-chapter-title__text" doc-editable="pdf-chapter-title-text">
+  <span class="srl-pdf-chapter-title__text srl-editor-component__text" doc-editable="pdf-chapter-title-text">
     Chapter title
   </span>
 </p>

package/livingdocs/110.PDF/040.pdf-chapter-title/scss/editor.scss

@@ -8,11 +8,6 @@
   @extend %srl-grid-base;
 }
 
-.srl-pdf-chapter-title__editor-text {
-  @include srl.typography-editor-label-text();
-  @extend %srl-regular-width;
-}
-
 .srl-pdf-chapter-title__text {
   @extend %srl-regular-width;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-reporting/base",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "Manage srl templates, build and publish",
   "bin": {
     "srl": "cli.js"
@@ -19,16 +19,16 @@
   "dependencies": {
     "@kne/color-palette": "^0.1.0",
     "archiver": "^7.0.1",
-    "chalk": "^5.4.1",
+    "chalk": "^5.6.2",
     "colors": "^1.4.0",
     "commander": "^11.1.0",
     "enquirer": "^2.4.1",
     "fs": "^0.0.1-security",
-    "fs-extra": "^11.2.0",
+    "fs-extra": "^11.3.2",
     "glob": "^10.4.5",
     "modern-css-reset": "^1.4.0",
     "node-html-parser": "^7.0.1",
-    "vite": "^5.4.11",
+    "vite": "^6.3.6",
     "write-json": "^3.0.1"
   },
   "keywords": [
@@ -41,8 +41,8 @@
   "author": "Michael Dörer",
   "license": "ISC",
   "devDependencies": {
-    "jest": "^30.0.2",
-    "prettier": "^3.4.2",
-    "typescript": "^5.7.2"
+    "jest": "^30.1.3",
+    "prettier": "^3.6.2",
+    "typescript": "^5.9.2"
   }
 }

package/plugins/viteSrlPlugin.d.ts

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

package/{srl/plugins/viteSrlPlugin.ts → plugins/viteSrlPlugin.js}

@@ -1,81 +1,123 @@
-import { type Plugin } from 'vite';
-import { fileURLToPath, URL } from 'node:url';
-import { readFileSync } from 'node:fs';
-import { join } from 'node:path/posix';
+import { existsSync, readFileSync, writeFileSync } from 'node:fs';
+import { join, relative } 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 folders from '../scripts/folders.js';
+import { beaver } from '../scripts/beaver.js';
+import { packageName } from '../scripts/config.js';
+import prepare from '../scripts/prepare.js';
+import { updatePackageJson, updateLivingDocsJson, updateNsWowJson } from '../scripts/utils.js';
 import {
   map,
   mapLdd,
   mapJs,
   mapScss,
-} from '@simple-reporting/base/scripts/build.js';
+} from '../scripts/build.js';
 import chalk from 'chalk';
+import { vueComponents } from '../scripts/vue/components.js';
 
-const msgBoxLength = 60;
 
-function centerText(text: string): string {
+/**
+ * Output prompts message in a box
+ */
+const msgBoxLength = 60;
+function centerText(text) {
   const padding = Math.max(0, (msgBoxLength - text.length) / 2);
   return (
     ' '.repeat(Math.floor(padding)) + text + ' '.repeat(Math.ceil(padding))
   );
 }
+function printPromptsMessage(messages) {
+  console.log('');
+  console.log(chalk.bgWhiteBright(centerText('')));
+  messages.forEach(m => {
+    console.log(chalk.bgWhiteBright.black.bold(centerText(m)));
+  })
+  console.log(chalk.bgWhiteBright(centerText('')));
+  console.log('');
+}
+
+const data = {
+  version: null
+};
+const srlConfig = readConfigJson();
+
+function readConfigJson() {
+  const configPath = join(folders.srlRoot, 'config.json');
+  if (existsSync(configPath)) {
+    const content = readFileSync(configPath, 'utf-8');
+    return JSON.parse(content);
+  }
+  return null;
+}
+
+function writeConfigJson(config) {
+  const configPath = join(folders.srlRoot, 'config.json');
+  writeFileSync(configPath, JSON.stringify(config, null, 2), 'utf-8');
+}
 
 function isVersionGreater(v1, v2) {
   const a = v1.split('.').map(Number);
   const b = v2.split('.').map(Number);
-  for (let i = 0; i < 3; i++) {
-    if (a[i] > b[i]) return true;
-    if (a[i] < b[i]) return false;
-  }
-  return false; // gleich
+  if (a[0] > b[0]) return false;
+  if (a[1] > b[1]) return false;
+  return a[2] > b[2];
 }
 
-function checkSrlVersion() {
+function getPackageVersion() {
   try {
     const pkgPath = join(folders.packagePath, 'package.json');
     const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'));
-    const current = pkg.version;
-    if (!current) return;
+    return pkg.version || null;
+  } catch (e) {
+    return null;
+  }
+}
+
+function checkForUpdates() {
+  try {
+    if (!data.version) return;
 
-    const tag = `v${current.split('.')[0]}-lts`;
+    const tag = `v${data.version.split('.')[0]}-lts`;
 
     const latest = execSync(`npm view ${packageName}@${tag} version`)
       .toString()
       .trim();
 
-    if (isVersionGreater(latest, current)) {
-      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('');
+    if (isVersionGreater(latest, data.version)) {
+      printPromptsMessage([
+        'Attention !!!',
+        `New ${packageName} version available.`,
+        `Update: ${data.version} => ${latest}`,
+        `Run: npm update -S ${packageName}`,
+      ])
     }
   } catch (e) {}
 }
+async function startActions() {
+  data.version = getPackageVersion();
+  checkForUpdates();
+  if (!srlConfig || JSON.stringify(srlConfig) !== JSON.stringify(data)) {
+    writeConfigJson(data);
+  }
+  if (srlConfig && srlConfig.version !== data.version) {
+    await prepare();
+    printPromptsMessage([
+      'Srl version changed',
+      'Trigger srl prepare',
+    ]);
+  }
+
+  await vueComponents();
+  await beaver(0);
+  await map();
+  await mapJs();
+}
 
-let timer: NodeJS.Timeout | null = null;
 
+/**
+ * Timer to trigger live reload actions
+ */
+let timer = null;
 function triggerAction(callback) {
   !timer || clearTimeout(timer);
   timer = setTimeout(async () => {
@@ -83,14 +125,7 @@ function triggerAction(callback) {
   }, 200);
 }
 
-async function startActions() {
-  checkSrlVersion();
-  await beaver(0);
-  await map();
-  await mapJs();
-}
-
-export default function viteSrlPlugin(): Plugin {
+export default function viteSrlPlugin() {
   return {
     name: 'vite-srl-plugin',
     config(config) {
@@ -99,42 +134,21 @@ export default function viteSrlPlugin(): Plugin {
       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 = config.resolve.alias || {};
+      config.resolve.alias['~'] = folders.root;
+      config.resolve.alias['@'] = folders.srlSrc;
+      config.resolve.alias['#components'] = folders.srlComponents;
+      config.resolve.alias['#composables'] = folders.srlComposables;
+      config.resolve.alias['#plugins'] = folders.srlPlugins;
+      config.resolve.alias['#types'] = folders.srlTypes;
+      config.resolve.alias['#utils'] = folders.srlUtils;
+      config.resolve.alias['#imports'] = folders.srlImports;
+      config.resolve.alias['#ld'] = folders.ld;
+      config.resolve.alias['assets'] = folders.srlAssets;
+      config.resolve.alias['srl'] = folders.srlSystem;
       config.resolve.alias['vue'] = 'vue/dist/vue.esm-bundler.js';
     },
-    configureServer(server) {
+    async configureServer(server) {
       const fontPath = join(folders.srlAssets, 'fonts');
 
       server.watcher.on('change', async (path) => {
@@ -183,6 +197,13 @@ export default function viteSrlPlugin(): Plugin {
         ) {
           triggerAction(mapLdd);
         }
+
+        if (
+          path.includes('src/components/Srl') &&
+          path.endsWith('.vue')
+        ) {
+          triggerAction(vueComponents);
+        }
       });
 
       server.watcher.on('unlink', (path) => {
@@ -218,6 +239,13 @@ export default function viteSrlPlugin(): Plugin {
         ) {
           triggerAction(mapLdd);
         }
+
+        if (
+          path.includes('src/components/Srl') &&
+          path.endsWith('.vue')
+        ) {
+          triggerAction(vueComponents);
+        }
       });
     },
   };

package/scripts/prepare.d.ts

@@ -1,2 +1,2 @@
 export default prepare;
-declare function prepare(): void;
+declare function prepare(): Promise<void>;

package/scripts/prepare.js

@@ -1,66 +1,11 @@
 import folders from './folders.js';
 import fs from 'fs';
-import path from 'path/posix';
 
-const tsConfigIncludes = [
-  '.srl/**/*',
-  '.srl/**/*.d.ts',
-  '.srl/**/*.vue',
-  'livingdocs/**/*',
-  'livingdocs/**/*.vue',
-];
-
-const tsConfigPaths = {
-  '@/*': ['./src/*'],
-  '~/*': ['./*'],
-  '#srl': ['./.srl'],
-  '#srl/*': ['./.srl/*'],
-  '#components': ['./.srl/components'],
-  '#components/*': ['./.srl/components/*'],
-  '#composables': ['./.srl/composables'],
-  '#composables/*': ['./.srl/composables/*'],
-  '#utils': ['./.srl/utils'],
-  '#utils/*': ['./.srl/utils/*'],
-  '#plugins': ['./.srl/plugins'],
-  '#plugins/*': ['./.srl/plugins/*'],
-  '#types': ['./.srl/types'],
-  '#types/*': ['./.srl/types/*'],
-  '#imports': ['./.srl/imports'],
-  '#imports/*': ['./.srl/imports/*'],
-  '#ld': ['./livingdocs'],
-  '#ld/*': ['./livingdocs/*'],
-  assets: ['./src/assets'],
-  'assets/*': ['./src/assets/*'],
-  srl: ['./.srl/srl'],
-  'srl/*': ['./.srl/srl/*'],
-};
-
-function prepare() {
+async function prepare() {
   if (fs.existsSync(folders.srlRoot)) {
-    fs.rmSync(folders.srlRoot, { recursive: true, force: true });
-  }
-  fs.cpSync(folders.packageSrl, folders.srlRoot, { recursive: true });
-
-  const tsConfigPath = path.join(folders.root, 'tsconfig.app.json');
-  if (fs.existsSync(tsConfigPath)) {
-    const tsConfig = JSON.parse(fs.readFileSync(tsConfigPath, 'utf-8'));
-
-    const mergedIncludes = [
-      ...(tsConfig.include || []),
-      ...tsConfigIncludes.filter((i) => !(tsConfig.include || []).includes(i)),
-    ];
-    tsConfig.include = tsConfig.include || [];
-    tsConfig.include = mergedIncludes;
-
-    const mergedPaths = {
-      ...(tsConfig.compilerOptions?.paths || {}),
-      ...tsConfigPaths,
-    };
-    tsConfig.compilerOptions = tsConfig.compilerOptions || {};
-    tsConfig.compilerOptions.paths = mergedPaths;
-
-    fs.writeFileSync(tsConfigPath, JSON.stringify(tsConfig, null, 2));
+    await fs.rmSync(folders.srlRoot, { recursive: true, force: true });
   }
+  await fs.cpSync(folders.packageSrl, folders.srlRoot, { recursive: true });
 }
 
 export default prepare;

package/scripts/vue/components.d.ts

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