@simple-reporting/base 1.0.37 → 1.0.38

package/scss/fa/font-free.scss

@@ -0,0 +1,17 @@
+@use "srl/fa" as v;
+
+@font-face {
+  font-family: 'Font Awesome 7 Brands';
+  font-style: normal;
+  font-weight: 400;
+  font-display: v.$font-display;
+  src: url('#{v.$font-path}/fa-brands-400.woff2');
+}
+
+@font-face {
+  font-family: v.$family;
+  font-style: normal;
+  font-weight: 900;
+  font-display: v.$font-display;
+  src: url('#{v.$font-path}/fa-solid-900.woff2');
+}

package/scss/fa/font-pro.scss

@@ -0,0 +1,41 @@
+@use "srl/fa" as v;
+
+@font-face {
+  font-family: 'Font Awesome 7 Brands';
+  font-style: normal;
+  font-weight: 400;
+  font-display: v.$font-display;
+  src: url('#{v.$font-path}/fa-brands-400.woff2');
+}
+
+@font-face {
+  font-family: v.$family;
+  font-style: normal;
+  font-weight: 100;
+  font-display: v.$font-display;
+  src: url('#{v.$font-path}/fa-thin-100.woff2');
+}
+
+@font-face {
+  font-family: v.$family;
+  font-style: normal;
+  font-weight: 300;
+  font-display: v.$font-display;
+  src: url('#{v.$font-path}/fa-light-300.woff2');
+}
+
+@font-face {
+  font-family: v.$family;
+  font-style: normal;
+  font-weight: 400;
+  font-display: v.$font-display;
+  src: url('#{v.$font-path}/fa-regular-400.woff2');
+}
+
+@font-face {
+  font-family: v.$family;
+  font-style: normal;
+  font-weight: 900;
+  font-display: v.$font-display;
+  src: url('#{v.$font-path}/fa-solid-900.woff2');
+}

package/scss/fa/index.scss

@@ -0,0 +1,118 @@
+@use "fa-source" as v;
+@forward "fa-source";
+@use "sass:map";
+@use "sass:string";
+@use "../system";
+
+@mixin base {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: var(--#{v.$css-prefix}-display, #{v.$display});
+  font-family: var(--_#{v.$css-prefix}-family);
+  font-feature-settings: normal;
+  font-style: normal;
+  font-synthesis: none;
+  font-variant: normal;
+  font-weight: var(--#{v.$css-prefix}-style, #{v.$style});
+  line-height: 1;
+  text-align: center;
+  text-rendering: auto;
+  width: var(--#{v.$css-prefix}-width, #{v.$fw-width});
+}
+
+@mixin brands($icon) {
+  @include content-before($icon, brands);
+}
+
+@mixin icon($icon) {
+  @include content-before($icon, v.$default-style);
+}
+
+@mixin thin($icon) {
+  @include content-before($icon, thin);
+}
+
+@mixin light($icon) {
+  @include content-before($icon, light);
+}
+
+@mixin regular($icon) {
+  @include content-before($icon, regular);
+}
+
+@mixin solid($icon) {
+  @include content-before($icon, solid);
+}
+
+@mixin size($size) {
+  @include v.fa-size($size);
+}
+
+@function find-font-weight($style) {
+  @if v.$type == pro {
+    @if $style == thin {
+      @return 100;
+    } @else if $style == light {
+      @return 300;
+    } @else if $style == regular {
+      @return 400;
+    } @else if $style == solid {
+      @return 900;
+    }
+  }
+  @return 900;
+}
+
+@mixin content($icon, $style: solid) {
+  @if not map.has-key(v.$brand-icons, $icon) and not map.has-key(v.$icons, $icon) {
+    @debug "Icon "#{$icon}" not found in Font Awesome 7.";
+  } @else {
+    $var: map.get(v.$brand-icons, $icon);
+    @if $var != null {
+      @include system.add-root-style(#{v.$css-prefix}-family-brands, '"Font Awesome 7 Brands"');
+      @include system.add-root-style(#{v.$css-prefix}-font-brands, normal 400 1em/1 var(--#{v.$css-prefix}-family-brands));
+      --#{v.$css-prefix}-family: var(--#{v.$css-prefix}-family-brands);
+      --#{v.$css-prefix}-style: 400;
+      --_#{v.$css-prefix}-family: var(--#{v.$css-prefix}-family, var(--#{v.$css-prefix}-style-family, "Font Awesome 7 Brands"));
+      content: string.unquote("\"#{ $var }\"");
+    } @else {
+      $var: map.get(v.$icons, $icon);
+      @include system.add-root-style(#{v.$css-prefix}-family-classic, '"#{ v.$family }"');
+      @include system.add-root-style(#{v.$css-prefix}-font-#{$style}, normal #{find-font-weight($style)} 1em/1 var(--#{v.$css-prefix}-family-classic));
+      @include system.add-root-style(#{v.$css-prefix}-style-family-classic, var(--#{v.$css-prefix}-family-classic));
+      --#{v.$css-prefix}-family: var(--#{v.$css-prefix}-family-classic);
+      --#{v.$css-prefix}-style: #{find-font-weight($style)};
+      --_#{v.$css-prefix}-family: var(--#{v.$css-prefix}-family, var(--#{v.$css-prefix}-style-family, '#{v.$family}'));
+      content: string.unquote("\"#{ $var }\"");
+    }
+  }
+}
+
+@mixin content-before($icon, $style: solid) {
+  @if not map.has-key(v.$brand-icons, $icon) and not map.has-key(v.$icons, $icon) {
+    @debug "Icon "#{$icon}" not found in Font Awesome 7.";
+  } @else {
+    $var: map.get(v.$brand-icons, $icon);
+    @if $var != null {
+      @include system.add-root-style(#{v.$css-prefix}-family-brands, '"Font Awesome 7 Brands"');
+      @include system.add-root-style(#{v.$css-prefix}-font-brands, normal 400 1em/1 var(--#{v.$css-prefix}-family-brands));
+      --#{v.$css-prefix}-family: var(--#{v.$css-prefix}-family-brands);
+      --#{v.$css-prefix}-style: 400;
+      --_#{v.$css-prefix}-family: var(--#{v.$css-prefix}-family, var(--#{v.$css-prefix}-style-family, "Font Awesome 7 Brands"));
+      &::before {
+        content: string.unquote("\"#{ $var }\"");
+      }
+    } @else {
+      $var: map.get(v.$icons, $icon);
+      @include system.add-root-style(#{v.$css-prefix}-family-classic, '"#{ v.$family }"');
+      @include system.add-root-style(#{v.$css-prefix}-font-#{$style}, normal #{find-font-weight($style)} 1em/1 var(--#{v.$css-prefix}-family-classic));
+      @include system.add-root-style(#{v.$css-prefix}-style-family-classic, var(--#{v.$css-prefix}-family-classic));
+      --#{v.$css-prefix}-family: var(--#{v.$css-prefix}-family-classic);
+      --#{v.$css-prefix}-style: #{find-font-weight($style)};
+      --_#{v.$css-prefix}-family: var(--#{v.$css-prefix}-family, var(--#{v.$css-prefix}-style-family, '#{v.$family}'));
+      &::before {
+        content: string.unquote("\"#{ $var }\"");
+      }
+    }
+  }
+}

package/scss/fa/source-free.scss

@@ -0,0 +1,14 @@
+@use "sass:map";
+@use "srl/meta";
+@use "@fortawesome/fontawesome-free/scss/variables" with (
+  $css-prefix: srl-icon,
+  $icon-property: --srl-icon,
+  $font-path: "@fortawesome/fontawesome-free/webfonts"
+);
+@forward "@fortawesome/fontawesome-free/scss/variables";
+@forward "@fortawesome/fontawesome-free/scss/mixins";
+$type: free;
+$default-style: light;
+@if map.has-key(meta.$meta, icon, default-style) {
+  $default-style: map.get(meta.$meta, icon, default-style);
+}

package/scss/fa/source-pro.scss

@@ -0,0 +1,15 @@
+@use "sass:map";
+@use "srl/meta";
+@use "@fortawesome/fontawesome-pro/scss/variables" as v with (
+  $css-prefix: srl-icon,
+  $icon-property: --srl-icon,
+  $font-path: "@fortawesome/fontawesome-pro/webfonts"
+);
+@use "@fortawesome/fontawesome-pro/scss/mixins" as m;
+@forward "@fortawesome/fontawesome-pro/scss/variables";
+@forward "@fortawesome/fontawesome-pro/scss/mixins";
+$type: pro;
+$default-style: light;
+@if map.has-key(meta.$meta, icon, default-style) {
+  $default-style: map.get(meta.$meta, icon, default-style);
+}

package/scss/index.scss

@@ -5,4 +5,5 @@
 @forward 'typography' as typography-*;
 @forward 'spacer' as spacer-*;
 @forward 'helpers' as helpers-*;
+@forward "button" as button-*;
 @forward 'meta';

package/srl/.srl/components/Srl/Aria/TabChain.vue

@@ -41,13 +41,14 @@ const firstElement = ref<HTMLElement>();
 const lastElement = ref<HTMLElement>();
 
 function registerTabs(): void {
+  const root = rootElement.value as HTMLElement;
   availableTabs.value = Array.from(
-    rootElement.value.querySelectorAll<HTMLElement>(
+    root.querySelectorAll<HTMLElement>(
       'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])',
     ),
   );
   firstElement.value = availableTabs.value[0];
-  lastElement.value = availableTabs.value.at(-1);
+  lastElement.value = availableTabs.value[availableTabs.value.length - 1];
 }
 
 onMounted(() => {
@@ -67,7 +68,7 @@ function next(event) {
 
   if (focusedElement === lastElement.value) {
     event.preventDefault();
-    firstElement.value.focus();
+    firstElement.value?.focus();
   }
 }
 
@@ -79,9 +80,9 @@ function prev(event) {
   const currentIndex = availableTabs.value.indexOf(event.target);
 
   if (currentIndex === -1) {
-    firstElement.value.focus();
+    firstElement.value?.focus();
   } else if (currentIndex === 0) {
-    lastElement.value.focus();
+    lastElement.value?.focus();
   } else {
     availableTabs.value[currentIndex - 1].focus();
   }

package/srl/.srl/components/Srl/Article/Accordion.vue

@@ -20,57 +20,70 @@ const props = withDefaults(defineProps<{
 const route = useRoute()
 
 const id = useId()
-const rootEl = ref<HTMLDivElement>()
-const toggle = ref<HTMLButtonElement>()
-const content = ref<HTMLDivElement>()
-const wrapper = ref<HTMLDivElement>()
+const rootEl = ref<HTMLDivElement | null>(null)
+const toggle = ref<HTMLButtonElement | null>(null)
+const content = ref<HTMLDivElement | null>(null)
+const wrapper = ref<HTMLDivElement | null>(null)
 const transition = computed<string>(() => {
   return props.duration + 'ms'
 })
 
 function open() {
-  toggle.value?.setAttribute('aria-expanded', 'true')
-  wrapper.value?.removeAttribute('hidden')
-  content.value?.classList.add(props.openClass)
-  content.value.focus()
+  const t = toggle.value as HTMLButtonElement
+  const w = wrapper.value as HTMLDivElement
+  const c = content.value as HTMLDivElement
+  t.setAttribute('aria-expanded', 'true')
+  w.removeAttribute('hidden')
+  c.classList.add(props.openClass)
+  c.focus()
 }
 
 function close() {
-  toggle.value?.setAttribute('aria-expanded', 'false')
-  content.value?.classList.remove(props.openClass)
+  const t = toggle.value as HTMLButtonElement
+  const w = wrapper.value as HTMLDivElement
+  const c = content.value as HTMLDivElement
+
+  t.setAttribute('aria-expanded', 'false')
+  c.classList.remove(props.openClass)
   setTimeout(() => {
-    wrapper.value?.setAttribute('hidden', 'true')
+    w.setAttribute('hidden', 'true')
   }, props.duration)
 }
 
 onMounted(() => {
-  toggle.value = rootEl.value?.querySelector( props.toggleSelector ) || undefined
-  content.value = rootEl.value?.querySelector( props.contentSelector ) || undefined
-  wrapper.value = rootEl.value?.querySelector( props.wrapperSelector ) || undefined
+  const r = rootEl.value as HTMLDivElement
+
+  toggle.value = r.querySelector( props.toggleSelector ) || null
+  content.value = r.querySelector( props.contentSelector ) || null
+  wrapper.value = r.querySelector( props.wrapperSelector ) || null
 
   if (toggle.value && content.value && wrapper.value) {
-    wrapper.value.setAttribute('hidden', 'true')
-    content.value.id = id
-    content.value.setAttribute('tabindex', '-1')
-    toggle.value.setAttribute('aria-controls', id)
-    toggle.value.setAttribute('aria-expanded', 'false')
+    const t = toggle.value as HTMLButtonElement
+    const w = wrapper.value as HTMLDivElement
+    const c = content.value as HTMLDivElement
+
+    w.setAttribute('hidden', 'true')
+    c.id = id
+    c.setAttribute('tabindex', '-1')
+    t.setAttribute('aria-controls', id)
+    t.setAttribute('aria-expanded', 'false')
 
-    toggle.value.addEventListener('click', () => {
-      toggle.value?.getAttribute('aria-expanded') === 'true' ? close() : open()
+    t.addEventListener('click', () => {
+      t.getAttribute('aria-expanded') === 'true' ? close() : open()
     })
 
     if (route.hash) {
-      if (rootEl.value.id && rootEl.value.id === route.hash) {
+      if (r.id && r.id === route.hash) {
         open()
         isAccordionAnchored() || setAccordionAnchored(true)
       } else {
-        const targetEl = rootEl.value?.querySelector<HTMLElement>(route.hash)
+        const targetEl = r.querySelector<HTMLElement>(route.hash)
         if (targetEl) {
           open()
           if (!isAccordionAnchored()) {
             setAccordionAnchored(true)
             setTimeout(() => {
-              rootEl.value?.scrollIntoView({
+              r.scrollIntoView({
                 behavior: 'smooth',
                 block: 'start',
               })

package/srl/.srl/components/Srl/Article/Dialog/Button.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { useArticles, useConfig } from '#composables';
-import { prepareHtmlContent, isDialogStored, addDialogToStorage, getDialogFromStorage } from '#utils';
+import { type RefSrlPageDialog, prepareHtmlContent, isDialogStored, addDialogToStorage, getDialogFromStorage } from '#utils';
 
 const props = defineProps<{
   uuid: string;
@@ -13,8 +13,8 @@ const articles = useArticles();
 const id = ref<string>(`srl-page__dialog-${props.uuid.replaceAll(' ', '_')}`);
 const content = ref<string>('');
 
-const dialog = isDialogStored(props.uuid)?
-    getDialogFromStorage(props.uuid):
+const dialog: RefSrlPageDialog = isDialogStored(props.uuid)?
+    getDialogFromStorage(props.uuid) as RefSrlPageDialog:
     ref<SrlPageDialog | null>(null);
 
 if (!isDialogStored(props.uuid)) {
@@ -23,7 +23,7 @@ if (!isDialogStored(props.uuid)) {
 }
 
 const state = computed<boolean>(() => {
-  return dialog.value ?
+  return dialog?.value ?
       dialog.value.dialogState : false
 });
 
@@ -50,7 +50,8 @@ async function loadContent() {
 }
 
 async function open() {
-  dialog.value?.open();
+  const d = dialog?.value as SrlPageDialog;
+  d?.open();
 }
 </script>
 

package/srl/.srl/components/Srl/Article/Root.vue

@@ -44,7 +44,10 @@ const article = useArticle();
 
 if (article.value) {
   const file = `./html/${locale}/${article.value.name}.html`;
-  const publicationTitle = config.value.settings?.publicationName[locale]??null;
+  let publicationTitle = null
+  if (config.value.settings?.publicationName) {
+    publicationTitle = config.value.settings.publicationName[locale] ?? null;
+  }
   try {
     const req = await fetch(file);
     let text = await req.text();

package/srl/.srl/components/Srl/Category/Accordion/Content.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
   };
 }>()
 
-const rootEl = ref<HTMLDivElement>()
+const rootEl = ref<HTMLDivElement | null>(null);
 const focusElements = ref<HTMLElement[]>()
 
 watch(
@@ -22,7 +22,7 @@ watch(
 )
 
 function getFocusElements() {
-  const container = rootEl.value
+  const container = rootEl.value as HTMLElement
   const elements = container?.querySelectorAll<HTMLElement>(
     'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
   )

package/srl/.srl/components/Srl/Category/Accordion.vue

@@ -15,12 +15,14 @@ function toggle() {
 
 function open() {
   state.value = true
-  rootEl.value?.querySelector<HTMLDivElement>(`#${id.value}`)?.focus()
+  const r = rootEl.value as HTMLElement
+  r?.querySelector<HTMLDivElement>(`#${id.value}`)?.focus()
 }
 
 function close() {
   state.value = false
-  rootEl.value?.querySelector<HTMLDivElement>(`[aria-controls="${id.value}"]`)?.focus()
+  const r = rootEl.value as HTMLElement
+  r?.querySelector<HTMLDivElement>(`[aria-controls="${id.value}"]`)?.focus()
 }
 
 const accordion = computed(() => {
@@ -37,18 +39,19 @@ const accordion = computed(() => {
 
 onMounted(() => {
   if (route.hash) {
-    if (rootEl.value.id && rootEl.value.id === route.hash) {
+    const r = rootEl.value as HTMLElement
+    if (r.id && `#${r.id}` === route.hash) {
       open()
       isAccordionAnchored() || setAccordionAnchored(true)
     } else {
-      const targetEl = rootEl.value?.querySelector<HTMLElement>(route.hash)
+      const targetEl = r?.querySelector<HTMLElement>(route.hash)
       if (targetEl) {
         open()
         if (!isAccordionAnchored()) {
           setAccordionAnchored(true)
           nextTick(() => {
             setTimeout(() => {
-              rootEl.value.scrollIntoView({
+              r.scrollIntoView({
                 behavior: 'smooth',
                 block: 'start',
               })

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

@@ -124,7 +124,10 @@ function toggleAction() {
   } else {
     menu.value.closeAll()
   }
-  !props.item.callback || props.item.callback($el.value , li.value, menu.value.$el)
+  !props.item.callback || props.item.callback(
+    $el.value as HTMLAnchorElement | HTMLButtonElement,
+    li.value as HTMLLIElement,
+    menu.value.$el)
   toggle()
 }
 function close() {
@@ -181,12 +184,18 @@ function back(event: KeyboardEvent) {
 }
 
 function link() {
-  !props.item.callback || props.item.callback($el.value, li.value)
+  !props.item.callback || props.item.callback(
+    $el.value as HTMLAnchorElement | HTMLButtonElement,
+    li.value as HTMLLIElement,
+  )
   emit('link')
 }
 
 function routerChange() {
-  !props.item.callback || props.item.callback()
+  !props.item.callback || props.item.callback(
+    $el.value as HTMLAnchorElement,
+    li.value as HTMLLIElement,
+  )
   emit('link')
   emit('routerChange')
 }
@@ -227,12 +236,18 @@ defineExpose({
 })
 
 function internalLinkClick() {
-  !props.item.callback || props.item.callback($el.value , li.value)
+  !props.item.callback || props.item.callback(
+    $el.value as HTMLAnchorElement,
+    li.value as HTMLLIElement,
+  )
   routerChange()
 }
 
 function externalLinkClick() {
-  !props.item.callback || props.item.callback($el.value , li.value)
+  !props.item.callback || props.item.callback(
+    $el.value as HTMLAnchorElement,
+    li.value as HTMLLIElement,
+  )
   link()
 }
 

package/srl/.srl/components/Srl/Page/Dialog.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import SrlPageCustomDialog from '@/Dialog.vue';
 import Autoload from '@/Autoload.ts';
 
 const props = withDefaults(
-    defineProps<{
-      header?: string;
-      content?: string;
-    }>(),
-    {
-      header: '',
-      content: '',
-    },
+  defineProps<{
+    header?: string;
+    content?: string;
+  }>(),
+  {
+    header: '',
+    content: '',
+  },
 );
 
 const $el = ref<HTMLDialogElement | null>(null);
@@ -29,14 +29,17 @@ function setDialogContentAndOpen(template: string) {
 
 function open() {
   dialogState.value = true;
-  $el.value?.showModal();
-  $el.value?.querySelector('.srl-dialog__main')?.focus();
-  Autoload.init($el.value);
+  const dialog = $el.value as HTMLDialogElement;
+  dialog.showModal();
+  const main = dialog.querySelector('.srl-dialog__main') as HTMLElement;
+  main ? main.focus() : null
+  Autoload.init(dialog);
 }
 
 function close() {
   dialogState.value = false;
-  $el.value?.close();
+  const dialog = $el.value as HTMLDialogElement;
+  dialog.close();
 }
 
 function clearContent() {
@@ -49,6 +52,7 @@ defineExpose({
   dialogState,
   setDialogContent,
   setDialogContentAndOpen,
+  clearContent,
   open,
   close,
 });
@@ -63,7 +67,20 @@ defineExpose({
       @click.stop="close"
   >
     <SrlAriaTabChain @click.stop>
-      <SrlPageCustomDialog :header="header" :content="content" @close="close" />
+      <SrlPageCustomDialog :header="header" :content="content" @close="close">
+        <template v-if="$slots.header" #header>
+          <slot name="header"/>
+        </template>
+        <template v-if="$slots.main" #main>
+          <slot name="main"/>
+        </template>
+        <template v-else-if="$slots.default" #main>
+          <slot/>
+        </template>
+        <template v-if="$slots.footer" #footer>
+          <slot name="footer"/>
+        </template>
+      </SrlPageCustomDialog>
     </SrlAriaTabChain>
   </dialog>
 </template>

package/srl/.srl/types/nswow.d.ts

@@ -97,6 +97,7 @@ declare global {
   type NsWowNavigationItem = {
     label: string;
     title?: string;
+    iconPrefix?: string;
     icon?: string;
     iconBefore?: string;
     iconAfter?: string;
@@ -120,7 +121,11 @@ declare global {
     attributes?: {
       [key: string]: string;
     };
-    callback?: () => void;
+    callback?: (
+      ctaElement: HTMLAnchorElement | HTMLButtonElement,
+      listElement: HTMLLIElement,
+      menu?: HTMLUListElement
+    ) => void;
     children?: NsWowNavigationItem[];
   };
 

package/srl/.srl/utils/index.ts

@@ -3,6 +3,7 @@ import { camelCase } from './string';
 import { prepareHtmlContent } from './html';
 import { objectDeepAssign } from './object'
 import {
+  type RefSrlPageDialog,
   usePageState,
   clearPageState,
   isDialogStored,
@@ -21,6 +22,7 @@ export {
   isExternalPath,
   camelCase,
   prepareHtmlContent,
+  RefSrlPageDialog,
   usePageState,
   clearPageState,
   isAccordionAnchored,