@simple-reporting/base 1.0.12 → 1.0.14

package/plugins/viteSrlPlugin.js

@@ -0,0 +1,270 @@
+import { fileURLToPath, URL } from 'node:url';
+import { existsSync, readFileSync, writeFileSync, readdirSync, statSync } from 'node:fs';
+import { join, relative } from 'node:path/posix';
+import { execSync } from 'node:child_process';
+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 '../scripts/build.js';
+import chalk from 'chalk';
+
+
+/**
+ * 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,
+  components:{}
+};
+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);
+  if (a[0] > b[0]) return false;
+  if (a[1] > b[1]) return false;
+  return a[2] > b[2];
+}
+
+function getPackageVersion() {
+  try {
+    const pkgPath = join(folders.packagePath, 'package.json');
+    const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'));
+    return pkg.version || null;
+  } catch (e) {
+    return null;
+  }
+}
+
+function checkForUpdates() {
+  try {
+    if (!data.version) return;
+
+    const tag = `v${data.version.split('.')[0]}-lts`;
+
+    const latest = execSync(`npm view ${packageName}@${tag} version`)
+      .toString()
+      .trim();
+
+    if (isVersionGreater(latest, data.version)) {
+      printPromptsMessage([
+        'Attention !!!',
+        `New ${packageName} version available.`,
+        `Update: ${data.version} => ${latest}`,
+        `Run: npm update -S ${packageName}`,
+      ])
+    }
+  } 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);
+  }
+  if (srlConfig && srlConfig.version !== data.version) {
+    await prepare();
+    printPromptsMessage([
+      'Srl version changed',
+      'Trigger srl prepare',
+    ]);
+  }
+
+  await beaver(0);
+  await map();
+  await mapJs();
+}
+
+
+/**
+ * Timer to trigger live reload actions
+ */
+let timer = null;
+function triggerAction(callback) {
+  !timer || clearTimeout(timer);
+  timer = setTimeout(async () => {
+    await callback();
+  }, 200);
+}
+
+export default function viteSrlPlugin() {
+  return {
+    name: 'vite-srl-plugin',
+    config(config) {
+
+      startActions();
+
+      config.base = './';
+
+      config.resolve = config.resolve || {};
+      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';
+    },
+    async 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/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/srl/components/Srl/Menu/Item/Content/Icon.vue

@@ -1,11 +1,27 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 const props = defineProps<{
   item: NsWowNavigationItem
+  depth: number
+  disableClasses: boolean
 }>();
 
 const prefix = props.item.iconPrefix ?? 'srl-icon'
+
+const classListIcon = computed(() => {
+  const res = [
+    `${prefix}`,
+    `${prefix}-${props.item.icon}`,
+  ]
+  if (!props.disableClasses) {
+    res.push('srl-menu__link-icon')
+    res.push(`srl-menu__link-icon--level-${props.depth}`)
+  }
+  return res
+})
 </script>
 
 <template>
-  <i :class="`${prefix} ${prefix}-${props.item.icon}`" aria-hidden="true"></i>
+  <i :class="classListIcon" aria-hidden="true"></i>
 </template>

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

@@ -1,12 +1,35 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 const props = defineProps<{
-  item: NsWowNavigationItem;
+  item: NsWowNavigationItem
+  depth: number
+  disableClasses: boolean
 }>();
 
 const prefix = props.item.iconPrefix ?? 'srl-icon'
+
+const classListIcon = computed(() => {
+  const res = [
+    `${prefix}`,
+    `${prefix}-${props.item.iconAfter}`,
+  ]
+  if (!props.disableClasses) {
+    res.push('srl-menu__link-icon-after')
+    res.push(`srl-menu__link-icon-after--level-${props.depth}`)
+  }
+  return res
+})
+
+const classListText = computed(() => {
+  return props.disableClasses? [] : [
+  'srl-menu__link-text',
+  `srl-menu__link-text--level-${props.depth}`
+  ]
+})
 </script>
 
 <template>
-  <span>{{ props.item.label }}</span>
-  <i :class="`${prefix} ${prefix}-${props.item.iconAfter}`" aria-hidden="true"></i>
+  <span :class="classListText" v-text="props.item.label"/>
+  <i :class="classListIcon" aria-hidden="true"></i>
 </template>

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

@@ -1,12 +1,36 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 const props = defineProps<{
-  item: NsWowNavigationItem;
+  item: NsWowNavigationItem
+  depth: number
+  disableClasses: boolean
 }>();
 
 const prefix = props.item.iconPrefix ?? 'srl-icon'
+
+const classListIcon = computed(() => {
+  const res = [
+    `${prefix}`,
+    `${prefix}-${props.item.iconBefore}`,
+  ]
+
+  if (!props.disableClasses) {
+    res.push('srl-menu__link-icon-before')
+    res.push(`srl-menu__link-icon-before--level-${props.depth}`)
+  }
+  return res
+})
+
+const classListText =  computed(() => {
+  return [
+    'srl-menu__link-text',
+    `srl-menu__link-text--level-${props.depth}`
+  ]
+})
 </script>
 
 <template>
-  <i :class="`${prefix} ${prefix}-${props.item.iconAfter}`" aria-hidden="true"></i>
-  <span>{{ props.item.label }}</span>
+  <i :class="classListIcon" aria-hidden="true"></i>
+  <span :class="classListText" v-text="props.item.label"/>
 </template>

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

@@ -1,11 +1,23 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 const props = defineProps<{
-  item: NsWowNavigationItem;
+  item: NsWowNavigationItem
+  depth: number
+  disableClasses: boolean
 }>();
+
+const classListIcon = computed(() => {
+  return props.disableClasses ? [] : [
+    'srl-menu__link-image',
+    `srl-menu__link-image--level-${props.depth}`
+  ]
+})
 </script>
 
 <template>
   <img
+    :class="classListIcon"
     :src="props.item.img.src"
     :alt="props.item.img.alt ?? props.item.label"
   />

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

@@ -1,12 +1,31 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 const props = defineProps<{
-  item: NsWowNavigationItem;
+  item: NsWowNavigationItem
+  depth: number
+  disableClasses: boolean
 }>();
+
+const classListIcon = computed(() => {
+  return props.disableClasses ? [] : [
+    'srl-menu__link-image-after',
+    `srl-menu__link-image-after--level-${props.depth}`
+  ]
+})
+
+const classListText = computed(() => {
+  return props.disableClasses ? [] : [
+    'srl-menu__link-text',
+    `srl-menu__link-text--level-${props.depth}`
+  ]
+})
 </script>
 
 <template>
-  <span>{{ props.item.label }}</span>
+  <span :class="classListText" v-text="props.item.label"/>
   <img
+    :class="classListIcon"
     :src="props.item.imgAfter.src"
     :alt="props.item.imgAfter.alt ?? props.item.label"
   />

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

@@ -1,13 +1,32 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 const props = defineProps<{
-  item: NsWowNavigationItem;
+  item: NsWowNavigationItem
+  depth: number
+  disableClasses: boolean
 }>();
+
+const classListIcon = computed(() => {
+  return props.disableClasses ? [] : [
+    'srl-menu__link-image-before',
+    `srl-menu__link-image-before--level-${props.depth}`
+  ]
+})
+
+const classListText = computed(() => {
+  return props.disableClasses ? [] : [
+    'srl-menu__link-text',
+    `srl-menu__link-text--level-${props.depth}`
+  ]
+})
 </script>
 
 <template>
   <img
+    :class="classListIcon"
     :src="props.item.imgBefore.src"
     :alt="props.item.imgBefore.alt ?? props.item.label"
   />
-  <span>{{ props.item.label }}</span>
+  <span :class="classListText" v-text="props.item.label"/>
 </template>

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

@@ -1,9 +1,20 @@
 <script setup lang="ts">
-const pops = defineProps<{
-  item: NsWowNavigationItem;
+import { computed } from 'vue'
+
+const props = defineProps<{
+  item: NsWowNavigationItem
+  depth: number
+  disableClasses: boolean
 }>();
+
+const classListText = computed(() => {
+  return props.disableClasses ? [] : [
+    'srl-menu__link-text',
+    `srl-menu__link-text--level-${props.depth}`
+  ]
+})
 </script>
 
 <template>
-  <span>{{ pops.item.label }}</span>
+  <span :class="classListText" v-text="props.item.label"/>
 </template>

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

@@ -8,7 +8,9 @@ import MenuItemContentIconBefore from './Content/IconBefore.vue';
 import MenuItemContentIconAfter from './Content/IconAfter.vue';
 
 const props = defineProps<{
-  item: NsWowNavigationItem;
+  item: NsWowNavigationItem
+  depth: number
+  disableClasses: boolean
 }>();
 </script>
 
@@ -16,26 +18,43 @@ const props = defineProps<{
   <MenuItemContentIcon
     v-if="props.item.icon"
     :item="props.item"
+    :depth="props.depth"
+    :disableClasses="props.disableClasses"
   />
   <MenuItemContentIconBefore
     v-else-if="props.item.iconBefore"
     :item="props.item"
+    :depth="props.depth"
+    :disableClasses="props.disableClasses"
   />
   <MenuItemContentIconAfter
     v-else-if="props.item.iconAfter"
     :item="props.item"
+    :depth="props.depth"
+    :disableClasses="props.disableClasses"
   />
   <MenuItemContentImage
     v-else-if="props.item.img"
     :item="props.item"
+    :depth="props.depth"
+    :disableClasses="props.disableClasses"
   />
   <MenuItemContentImageBefore
     v-else-if="props.item.imgBefore"
     :item="props.item"
+    :depth="props.depth"
+    :disableClasses="props.disableClasses"
   />
   <MenuItemContentImageAfter
     v-else-if="props.item.imgAfter"
     :item="props.item"
+    :depth="props.depth"
+    :disableClasses="props.disableClasses"
+  />
+  <MenuItemContentText
+    v-else
+    :item="props.item"
+    :depth="props.depth"
+    :disableClasses="props.disableClasses"
   />
-  <MenuItemContentText v-else :item="props.item" />
 </template>