@simple-reporting/base 1.0.33 → 1.0.35

package/devTools/dialog/Settings.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { config, sizeOptions } from '../config.ts'
+import { settings } from '../settings.ts'
+
+import { NSelect, NSlider, NSwitch, NTable, NText, NFlex } from 'naive-ui'
+</script>
+
+<template>
+
+  <NTable>
+    <tbody>
+      <tr>
+        <td>
+          <NText strong>Dark Mode</NText>
+        </td>
+        <td>
+          <NSwitch v-model:value="settings.darkMode" />
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <NText strong>Size</NText>
+        </td>
+        <td>
+          <NSelect
+            v-model:value="settings.size"
+            size="small"
+            :options="sizeOptions.map(s => ({ label: s, value: s }))"
+          />
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <NText strong>Position</NText>
+        </td>
+        <td>
+          <NSelect
+            v-model:value="settings.position"
+            size="small"
+            :options="config.positions.map(p => ({ label: p, value: p }))"
+          />
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <NText strong>Opacity</NText>
+        </td>
+        <td>
+          <NFlex justify="center">
+            <NText v-text="settings.opacity"/>
+          </NFlex>
+          <NSlider
+            v-model:value="settings.opacity"
+            :min="0.1"
+            :max="1"
+            :step="0.1"
+          />
+        </td>
+      </tr>
+    </tbody>
+  </NTable>
+</template>

package/devTools/dialog/Spacer.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { NGrid, NGridItem, NH2, NTable } from 'naive-ui'
+import { useSrlConfig } from '#composables'
+import { computed } from 'vue'
+
+const srlConfig = useSrlConfig()
+
+type SpacerItem = {
+  name: string
+  size: number | string
+  alias: string | null
+  only?: SpacerItemMedia[]
+  up?: SpacerItemMedia[]
+  down?: SpacerItemMedia[]
+}
+
+type SpacerItemMedia = {
+  name: string
+  size: number | string
+}
+
+const spacerView = computed<SpacerItem[]>(() => {
+  const res = []
+  for (const [key, item] of Object.entries(srlConfig.value.spacer.spacer)) {
+    const i: SpacerItem = {
+      name: key,
+      size: item.size,
+      alias: item.alias??null,
+    }
+
+    if (item.media) {
+      for (const [media, value] of Object.entries(item.media)) {
+        if (['up', 'down'].includes(media)) {
+          for (const [m, s] of Object.entries(value as object)) {
+            if (!i[media]) { i[media] = [] }
+            i[media].push({
+              name: m,
+              size: s.size ?? s,
+            })
+          }
+        } else {
+          if (!i.only) { i.only = [] }
+          i.only.push({
+            name: media,
+            size: value.size ?? value,
+          })
+        }
+      }
+    }
+
+    res.push(i)
+  }
+
+  return res;
+})
+
+</script>
+
+<template>
+  <NGrid cols="1 s:2 m:3 l:4" responsive="screen" x-gap="20" y-gap="20">
+    <NGridItem v-for="item in spacerView" :key="item.name">
+      <NH2>
+        {{item.name}}
+        <template v-if="item.alias">( {{item.alias}} )</template>
+      </NH2>
+      <NTable striped>
+        <tbody>
+          <tr>
+            <td v-text="'size'"/>
+            <td colspan="2" v-text="typeof item.size === 'number' ? item.size + 'px / ' + (item.size / 16) + 'rem' : item.size" />
+          </tr>
+          <template v-if="item.only">
+            <template v-for="(only, index) in item.only">
+              <tr>
+                <td class="v-top" v-if="index === 0" :rowspan="item.only.length" v-text="'only'"/>
+                <td v-text="only.name"/>
+                <td v-text="typeof only.size === 'number' ? only.size + 'px / ' + (only.size / 16) + 'rem' : only.size" />
+              </tr>
+            </template>
+          </template>
+          <template v-if="item.up">
+            <template v-for="(up, index) in item.up">
+              <tr>
+                <td class="v-top" v-if="index === 0" :rowspan="item.up.length" v-text="'up'"/>
+                <td v-text="up.name"/>
+                <td v-text="typeof up.size === 'number' ? up.size + 'px / ' + (up.size / 16) + 'rem' : up.size" />
+              </tr>
+            </template>
+          </template>
+          <template v-if="item.down">
+            <template v-for="(down, index) in item.down">
+              <tr>
+                <td class="v-top" v-if="index === 0" :rowspan="item.down.length" v-text="'down'"/>
+                <td v-text="down.name"/>
+                <td v-text="typeof down.size === 'number' ? down.size + 'px / ' + (down.size / 16) + 'rem' : down.size" />
+              </tr>
+            </template>
+          </template>
+        </tbody>
+      </NTable>
+    </NGridItem>
+
+  </NGrid>
+</template>
+
+<style scoped lang="scss">
+.v-top {
+  vertical-align: top;
+}
+</style>

package/devTools/dialog/ViewPort.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { useViewPort, useSrlConfig } from '#composables'
+import { NTable, NH2, NText } from 'naive-ui'
+
+const srlConfig = useSrlConfig()
+const viewPort = useViewPort()
+</script>
+
+<template>
+  <NTable striped>
+    <tbody>
+      <tr>
+        <td>window.innerWidth</td>
+        <td v-text="viewPort.innerWidth" />
+      </tr>
+      <tr>
+        <td>ViewPort</td>
+        <td v-text="viewPort.viewPort" />
+      </tr>
+    </tbody>
+  </NTable>
+  <NH2>Breakpoints</NH2>
+  <NTable striped>
+    <tbody>
+      <tr v-for="(value, breakpoint) in srlConfig.grid.breakpoints" :key="breakpoint">
+        <td>
+          <NText strong v-text="breakpoint" :type="breakpoint === viewPort.viewPort?'error':'default'"></NText>
+        </td>
+        <td v-text="value" />
+      </tr>
+    </tbody>
+  </NTable>
+</template>

package/devTools/panel/Content.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { settings } from '../settings.ts'
+import { NButton, NIcon } from 'naive-ui'
+import { SettingsOutline, Eye, EyeOff } from '@vicons/ionicons5'
+
+function toggleActive() {
+  settings.value.active = !settings.value.active
+}
+
+const dialogContent = defineModel('dialogContent', {
+  type: String as () => SrlDevToolsDialog,
+  default: null
+})
+
+function dialogToggle(target: SrlDevToolsDialog) {
+  dialogContent.value = dialogContent.value === target ? null : target
+}
+</script>
+
+<template>
+
+  <NButton
+    v-if="settings.active"
+    quaternary
+    circle
+    size="tiny"
+    @click="dialogToggle('settings')"
+  >
+    <template #icon>
+      <NIcon :component="SettingsOutline" />
+    </template>
+  </NButton>
+
+  <NButton
+    quaternary
+    circle
+    size="tiny"
+    @click="toggleActive"
+    :type="settings.active?'default':'error'"
+  >
+    <template #icon>
+      <NIcon :component="settings.active?Eye:EyeOff" />
+    </template>
+  </NButton>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/devTools/settings.ts

@@ -0,0 +1,28 @@
+import { computed, ref, watch } from 'vue'
+import { config } from './config'
+
+export const settings = ref<SrlDevToolsSettings>(config.value.defaultSettings)
+
+const storedSettings = localStorage.getItem(config.value.settingsNamespace)
+if (storedSettings) {
+  try {
+    settings.value = JSON.parse(storedSettings)
+  } catch {}
+}
+
+watch(
+  settings.value,
+  (newSettings) => {
+    localStorage.setItem(config.value.settingsNamespace, JSON.stringify(newSettings))
+  },
+  { immediate: true }
+)
+
+export const isDefaultSettings = computed(() => {
+  return JSON.stringify(settings.value) === JSON.stringify(config.value.defaultSettings)
+})
+
+export default {
+  settings,
+  isDefaultSettings,
+}

package/devTools/utils/index.ts

@@ -0,0 +1,7 @@
+import { wheelResizeHandler as _wheelResizeHandler } from './wheelResizeHandler.ts'
+
+export const wheelResizeHandler = _wheelResizeHandler
+
+export default {
+  wheelResizeHandler,
+}

package/devTools/utils/wheelResizeHandler.ts

@@ -0,0 +1,19 @@
+import { settings } from '../settings.ts'
+import { sizeOptions } from '../config.ts'
+
+export  function wheelResizeHandler(e: WheelEvent) {
+  if (!settings.value.active || !settings.value.mouseResize) return
+  e.stopPropagation()
+  e.preventDefault()
+  const options = sizeOptions.value
+  const currentIdx = options.indexOf(settings.value.size)
+  if (e.deltaY > 0 && currentIdx < options.length - 1) {
+    settings.value.size = options[currentIdx + 1]
+  } else if (e.deltaY < 0 && currentIdx > 0) {
+    settings.value.size = options[currentIdx - 1]
+  }
+}
+
+export default {
+  wheelResizeHandler,
+}

package/livingdocs/010.Titles/020.title-h2/scss/general.scss

@@ -1,7 +1,4 @@
 @use 'srl';
-@use "sass:map";
-
-$number-width: srl.spacer-get(map.get(srl.$meta, title, number-width));
 
 .srl-title-h2 {
   @include srl.typography-title-h2();
@@ -21,16 +18,4 @@ $number-width: srl.spacer-get(map.get(srl.$meta, title, number-width));
 
 .srl-title-h2__number-text-container {
   display: flex;
-}
-
-.srl-title-h2__number {
-  width: $number-width;
-}
-
-.srl-title-h2__number + .srl-title-h2__text {
-  width: calc(100% - #{$number-width});
-}
-
-.srl-title-h2__number:empty + .srl-title-h2__text {
-  width: 100%;
-}
+}

package/livingdocs/010.Titles/020.title-h2/scss/pdf.scss

@@ -0,0 +1,16 @@
+@use 'srl';
+@use 'sass:map';
+
+$number-width: srl.spacer-get(map.get(srl.$meta, title, number-width-pdf));
+
+.srl-title-h2__number {
+  width: $number-width;
+}
+
+.srl-title-h2__number + .srl-title-h2__text {
+  width: calc(100% - #{$number-width});
+}
+
+.srl-title-h2__number:empty + .srl-title-h2__text {
+  width: 100%;
+}

package/livingdocs/010.Titles/020.title-h2/scss/web.scss

@@ -0,0 +1,16 @@
+@use 'srl';
+@use 'sass:map';
+
+$number-width: srl.spacer-get(map.get(srl.$meta, title, number-width));
+
+.srl-title-h2__number {
+  width: $number-width;
+}
+
+.srl-title-h2__number + .srl-title-h2__text {
+  width: calc(100% - #{$number-width});
+}
+
+.srl-title-h2__number:empty + .srl-title-h2__text {
+  width: 100%;
+}

package/livingdocs/010.Titles/030.title-h3/scss/general.scss

@@ -1,7 +1,4 @@
 @use 'srl';
-@use "sass:map";
-
-$number-width: srl.spacer-get(map.get(srl.$meta, title, number-width));
 
 .srl-title-h3 {
   @include srl.typography-title-h3();
@@ -9,16 +6,4 @@ $number-width: srl.spacer-get(map.get(srl.$meta, title, number-width));
 
 .srl-title-h3__number-text-container {
   display: flex;
-}
-
-.srl-title-h3__number {
-  width: $number-width;
-}
-
-.srl-title-h3__number + .srl-title-h3__text {
-  width: calc(100% - #{$number-width});
-}
-
-.srl-title-h3__number:empty + .srl-title-h3__text {
-  width: 100%;
 }

package/livingdocs/010.Titles/030.title-h3/scss/pdf.scss

@@ -0,0 +1,16 @@
+@use 'srl';
+@use 'sass:map';
+
+$number-width: srl.spacer-get(map.get(srl.$meta, title, number-width-pdf));
+
+.srl-title-h3__number {
+  width: $number-width;
+}
+
+.srl-title-h3__number + .srl-title-h3__text {
+  width: calc(100% - #{$number-width});
+}
+
+.srl-title-h3__number:empty + .srl-title-h3__text {
+  width: 100%;
+}

package/livingdocs/010.Titles/030.title-h3/scss/web.scss

@@ -0,0 +1,16 @@
+@use 'srl';
+@use 'sass:map';
+
+$number-width: srl.spacer-get(map.get(srl.$meta, title, number-width));
+
+.srl-title-h3__number {
+  width: $number-width;
+}
+
+.srl-title-h3__number + .srl-title-h3__text {
+  width: calc(100% - #{$number-width});
+}
+
+.srl-title-h3__number:empty + .srl-title-h3__text {
+  width: 100%;
+}

package/livingdocs/010.Titles/040.title-h4/scss/general.scss

@@ -1,7 +1,4 @@
 @use 'srl';
-@use "sass:map";
-
-$number-width: srl.spacer-get(map.get(srl.$meta, title, number-width));
 
 .srl-title-h4 {
   @include srl.typography-title-h4();
@@ -9,16 +6,4 @@ $number-width: srl.spacer-get(map.get(srl.$meta, title, number-width));
 
 .srl-title-h4__number-text-container {
   display: flex;
-}
-
-.srl-title-h4__number {
-  width: $number-width;
-}
-
-.srl-title-h4__number + .srl-title-h4__text {
-  width: calc(100% - #{$number-width});
-}
-
-.srl-title-h4__number:empty + .srl-title-h4__text {
-  width: 100%;
 }

package/livingdocs/010.Titles/040.title-h4/scss/pdf.scss

@@ -0,0 +1,16 @@
+@use 'srl';
+@use "sass:map";
+
+$number-width: srl.spacer-get(map.get(srl.$meta, title, number-width-pdf));
+
+.srl-title-h4__number {
+  width: $number-width;
+}
+
+.srl-title-h4__number + .srl-title-h4__text {
+  width: calc(100% - #{$number-width});
+}
+
+.srl-title-h4__number:empty + .srl-title-h4__text {
+  width: 100%;
+}

package/livingdocs/010.Titles/040.title-h4/scss/web.scss

@@ -0,0 +1,16 @@
+@use 'srl';
+@use "sass:map";
+
+$number-width: srl.spacer-get(map.get(srl.$meta, title, number-width));
+
+.srl-title-h4__number {
+  width: $number-width;
+}
+
+.srl-title-h4__number + .srl-title-h4__text {
+  width: calc(100% - #{$number-width});
+}
+
+.srl-title-h4__number:empty + .srl-title-h4__text {
+  width: 100%;
+}

package/livingdocs/040.Media/010.table/scss/general.scss

@@ -270,15 +270,18 @@ td {
     text-align: right;
   }
 
-  &[class*="vatop"] {
+  &[class*='srl-vertical-top'],
+  &[class*='vatop'] {
     vertical-align: top;
   }
 
-  &[class*="vamiddle"] {
+  &[class*='srl-vertical-middle'],
+  &[class*='vamiddle'] {
     vertical-align: middle;
   }
 
-  &[class*="vabottom"] {
+  &[class*='srl-vertical-bottom'],
+  &[class*='vabottom'] {
     vertical-align: bottom;
   }
 

package/livingdocs/110.PDF/100.pdf-toc-item/scss/general.scss

@@ -18,6 +18,11 @@
   width: srl.system-size-unit(24pt);
 
   &:after {
-    content: target-counter(attr(data-page-number), page);
+    .srl-pdf-toc__link:not([href]) & {
+      content: "No link provided";
+      color: #FF0000;
+      display: inline-block;
+      margin-left: srl.spacer-get(100)
+    }
   }
 }

package/livingdocs/110.PDF/100.pdf-toc-item/scss/pdf.scss

@@ -3,4 +3,10 @@
 
 .srl-pdf-toc__item {
   -ro-pdf-tag-type: toci;
+}
+
+.srl-pdf-toc__number {
+  &:after {
+    content: target-counter(attr(data-page-number), page);
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-reporting/base",
-  "version": "1.0.33",
+  "version": "1.0.35",
   "description": "Manage srl templates, build and publish",
   "repository": {
     "url": "https://github.com/mmssolutionsio/simple-reporting-library"
@@ -21,6 +21,7 @@
   "main": "cli.js",
   "dependencies": {
     "@kne/color-palette": "^0.1.0",
+    "@vicons/ionicons5": "^0.13.0",
     "archiver": "^7.0.1",
     "chalk": "^5.6.2",
     "colors": "^1.4.0",
@@ -30,10 +31,14 @@
     "fs": "^0.0.1-security",
     "fs-extra": "^11.3.2",
     "glob": "^10.4.5",
+    "native-ui": "^0.0.1",
+    "write-json": "^3.0.1"
+  },
+  "peerDependencies": {
     "modern-css-reset": "^1.4.0",
+    "naive-ui": "^2.43.2",
     "node-html-parser": "^7.0.1",
-    "vite": "^6.3.6",
-    "write-json": "^3.0.1"
+    "vite": "^6.3.6"
   },
   "keywords": [
     "scss",

package/plugins/viteSrlPlugin.js

@@ -10,6 +10,8 @@ import {
   map,
   mapLdd,
   mapJs,
+  generateUseSrlConfig,
+  mapIndexScss,
   mapScss,
 } from '../scripts/build.js';
 import chalk from 'chalk';
@@ -121,6 +123,8 @@ async function startActions() {
   }
 
   await vueComponents();
+  await generateUseSrlConfig();
+  await mapIndexScss();
   await beaver(0);
   await map();
   await mapJs();
@@ -174,6 +178,7 @@ function viteSrlPlugin() {
         }
         if (path.endsWith('/srl.config.json')) {
           await updateNsWowJson();
+          await generateUseSrlConfig();
           triggerAction(beaver);
         }
       });
@@ -196,14 +201,14 @@ function viteSrlPlugin() {
         }
 
         if (
-          path.includes('livingdocs') &&
+          path.includes('/livingdocs/') &&
           (path.endsWith('/app.js') || path.endsWith('/app.ts'))
         ) {
           triggerAction(mapJs);
         }
 
         if (
-          path.includes('livingdocs') &&
+          path.includes('/livingdocs/') &&
           (path.endsWith('/properties.json') ||
             path.endsWith('/properties.ts') ||
             path.endsWith('/properties.js') ||
@@ -213,11 +218,15 @@ function viteSrlPlugin() {
         }
 
         if (
-          path.includes('src/components/') &&
+          path.includes('/src/components/') &&
           path.endsWith('.vue')
         ) {
           triggerAction(vueComponents);
         }
+
+        if (path.includes('/src/assets/scss/placeholders/')) {
+          triggerAction(mapIndexScss);
+        }
       });
 
       server.watcher.on('unlink', (path) => {
@@ -238,14 +247,14 @@ function viteSrlPlugin() {
         }
 
         if (
-          path.includes('livingdocs') &&
+          path.includes('/livingdocs/') &&
           (path.endsWith('/app.js') || path.endsWith('/app.ts'))
         ) {
           triggerAction(mapJs);
         }
 
         if (
-          path.includes('livingdocs') &&
+          path.includes('/livingdocs/') &&
           (path.endsWith('/properties.json') ||
             path.endsWith('/properties.ts') ||
             path.endsWith('/properties.js') ||
@@ -255,11 +264,15 @@ function viteSrlPlugin() {
         }
 
         if (
-          path.includes('src/components/') &&
+          path.includes('/src/components/') &&
           path.endsWith('.vue')
         ) {
           triggerAction(vueComponents);
         }
+
+        if (path.includes('/src/assets/scss/placeholders/')) {
+          triggerAction(mapIndexScss);
+        }
       });
     },
   };

package/scripts/build.d.ts

@@ -22,6 +22,8 @@ export function ddev(): Promise<void>;
  * @throws {Error} If there is an error during the mapping process.
  */
 export function map(): Promise<boolean>;
+export function generateUseSrlConfig(): Promise<void>;
+export function mapIndexScss(): Promise<boolean>;
 /**
  * Maps SCSS files and generates import statements for different output files.
  *