@simple-reporting/base 1.0.32 → 1.0.34

package/devTools/dialog/Grid.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useSrlConfig } from '#composables'
+
+import { NTable, NGrid, NGridItem, NH2 } from 'naive-ui'
+
+const srlConfig = useSrlConfig()
+
+type GridView = {
+  name: string,
+  columns: number,
+  section: {
+    from: number,
+    to?: number
+  },
+  gap: {
+    column: string | number,
+    row: string | number
+  },
+  padding?: string | number,
+  maxWidth?: string | number
+}
+
+const gridView = computed<GridView[]>(() => {
+  const list = []
+  const breakpoints = Object.keys(srlConfig.value.grid.breakpoints)
+  breakpoints.forEach((breakpoint, index) => {
+    const item: GridView = {
+      name: breakpoint,
+      columns: srlConfig.value.grid.columns[breakpoint],
+      section: {
+        from: srlConfig.value.grid.breakpoints[breakpoint],
+      },
+      gap: {
+        column: 0,
+        row: 0,
+      }
+    }
+
+    if (breakpoints[(index + 1)]) {
+      item.section.to = srlConfig.value.grid.breakpoints[breakpoints[(index + 1)]] - 1
+    }
+
+    if (srlConfig.value.grid.containers[breakpoint]['padding']) {
+      item.padding = srlConfig.value.grid.containers[breakpoint]['padding']
+    }
+
+    if (srlConfig.value.grid.containers[breakpoint]['max-width']) {
+      item.maxWidth = srlConfig.value.grid.containers[breakpoint]['max-width']
+    }
+
+
+    if (srlConfig.value.grid.gutter[breakpoint]['gap']) {
+      item.gap.column = srlConfig.value.grid.gutter[breakpoint]['gap']
+      item.gap.row = srlConfig.value.grid.gutter[breakpoint]['gap']
+    } else {
+      if (srlConfig.value.grid.gutter[breakpoint]['column-gap']) {
+        item.gap.column = srlConfig.value.grid.gutter[breakpoint]['column-gap']
+      }
+      item.gap.row = srlConfig.value.grid.gutter[breakpoint]['row-gap']??item.gap.column
+    }
+
+    list.push(item)
+  })
+  return list
+})
+
+</script>
+
+<template>
+  <NGrid cols="1 s:2 m:3 l:4" responsive="screen" x-gap="20" y-gap="20">
+
+    <NGridItem v-for="item in gridView" :key="item.name">
+      <NH2 v-text="item.name"/>
+      <NTable striped>
+        <tbody>
+          <tr>
+            <td>columns</td>
+            <td v-text="item.columns"/>
+          </tr>
+          <tr v-if="item.name !== 'print'">
+            <td>from</td>
+            <td v-text="item.section.from + 'px / ' + (item.section.from / 16) + 'rem'"/>
+          </tr>
+          <tr v-if="item.name !== 'print' && item.section.to">
+            <td>to</td>
+            <td v-text="item.section.to + 'px / ' + (item.section.to / 16) + 'rem'"/>
+          </tr>
+          <tr v-if="item.padding">
+            <td>padding</td>
+            <td v-text="typeof item.padding === 'number' ? item.padding + 'px / ' + (item.padding / 16) + 'rem' : item.padding"/>
+          </tr>
+          <tr v-if="item.maxWidth">
+            <td>max-width</td>
+            <td v-text="typeof item.maxWidth === 'number' ? item.maxWidth + 'px / ' + (item.maxWidth/ 16) + 'rem' : item.maxWidth"/>
+          </tr>
+          <tr>
+            <td>column-gap</td>
+            <td v-text="typeof item.gap.column === 'number' ? item.gap.column + 'px / ' + (item.gap.column / 16) + 'rem' : item.gap.column"></td>
+          </tr>
+          <tr>
+            <td>row-gap</td>
+            <td v-text="typeof item.gap.row === 'number' ? item.gap.row + 'px / ' + (item.gap.row / 16) + 'rem' : item.gap.row"></td>
+          </tr>
+        </tbody>
+      </NTable>
+
+    </NGridItem>
+
+  </NGrid>
+</template>

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/editor.scss

@@ -1 +1,9 @@
+@use 'srl';
+@use 'sass:map';
 @use "web";
+
+$number-width: srl.spacer-get(map.get(srl.$meta, title, number-width));
+
+.srl-title-h2__number.doc-no-placeholder + .srl-title-h2__text {
+  width: calc(100% - #{$number-width});
+}

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,12 +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__text {
-  width: calc(100% - #{$number-width});
 }

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/editor.scss

@@ -1 +1,9 @@
+@use 'srl';
+@use 'sass:map';
 @use "web";
+
+$number-width: srl.spacer-get(map.get(srl.$meta, title, number-width));
+
+.srl-title-h3__number.doc-no-placeholder + .srl-title-h3__text {
+  width: calc(100% - #{$number-width});
+}

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,12 +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__text {
-  width: calc(100% - #{$number-width});
 }

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/editor.scss

@@ -1 +1,9 @@
+@use 'srl';
+@use 'sass:map';
 @use "web";
+
+$number-width: srl.spacer-get(map.get(srl.$meta, title, number-width));
+
+.srl-title-h4__number.doc-no-placeholder + .srl-title-h4__text {
+  width: calc(100% - #{$number-width});
+}

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,12 +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__text {
-  width: calc(100% - #{$number-width});
 }

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/020.Text/060.quote-with-portrait/scss/web.scss

@@ -1,5 +1,5 @@
 @use 'srl';
-@use "assets/scss/placeholders";
+@use "@/assets/scss/placeholders";
 
 .srl-quote__figure {
   .srl-quote--with-image & {

package/livingdocs/020.Text/070.footnote-container/scss/web.scss

@@ -1,5 +1,5 @@
 @use "srl";
-@use "assets/scss/placeholders";
+@use "@/assets/scss/placeholders";
 
 .srl-footnote-container:not(.srl-grid) {
   @extend %srl-regular-width;

package/livingdocs/030.Lists/010.unordered-list/scss/pdf.scss

@@ -6,3 +6,7 @@ $number-width: srl.system-size-unit(map.get(srl.$meta, footnote, number-width-pd
 .srl-table-list {
   margin-left: $number-width;
 }
+
+.srl-list-group__list {
+  -ro-pdf-tag-type: L;
+}

package/livingdocs/030.Lists/020.ordered-list/scss/pdf.scss

@@ -0,0 +1,5 @@
+@use 'srl';
+
+.srl-list-group__list {
+  -ro-pdf-tag-type: L;
+}

package/livingdocs/030.Lists/030.alphanumeric-list/scss/pdf.scss

@@ -0,0 +1,5 @@
+@use 'srl';
+
+.srl-list-group__list {
+  -ro-pdf-tag-type: L;
+}

package/livingdocs/030.Lists/040.list-item/scss/pdf.scss

@@ -4,11 +4,15 @@
 $marker-width: srl.system-size-unit(map.get(srl.$meta, list, marker-width-pdf));
 
 .srl-list-group__item {
+  -ro-pdf-tag-type: LI;
+
   &:before {
     width: $marker-width;
+    -ro-pdf-tag-type: Lbl;
   }
 }
 
 .srl-list-group__item-text {
   width: calc(100% - #{$marker-width});
+  -ro-pdf-tag-type: LBody;
 }