@simple-reporting/base 1.0.23 → 1.0.25

package/scss/typography/functions.scss

@@ -6,51 +6,51 @@
   @if not map.has-key(variables.$typography, $typo) {
     @error "Invalid typo for typography specified! Choose one of #{map.keys(variables.$typography)}";
   }
-  @return var(--#{variables.$variable-prefix}typo-#{$typo}-font-family, unset);
+  @return system.root-style(#{variables.$variable-prefix}typo-#{$typo}-font-family, unset);
 }
 
 @function get-font-size($typo) {
   @if not map.has-key(variables.$typography, $typo) {
     @error "Invalid typo for typo specified! Choose one of #{map.keys(variables.$typography)}";
   }
-  @return var(--#{variables.$variable-prefix}typo-#{$typo}-font-size, unset);
+  @return system.root-style(#{variables.$variable-prefix}typo-#{$typo}-font-size, unset);
 }
 
 @function get-line-height($typo) {
   @if not map.has-key(variables.$typography, $typo) {
     @error "Invalid typo for typography specified! Choose one of #{map.keys(variables.$typography)}";
   }
-  @return var(--#{variables.$variable-prefix}typo-#{$typo}-line-height, unset);
+  @return system.root-style(#{variables.$variable-prefix}typo-#{$typo}-line-height, unset);
 }
 
 @function get-font-style($typo) {
   @if not map.has-key(variables.$typography, $typo) {
     @error "Invalid typo for typography specified! Choose one of #{map.keys(variables.$typography)}";
   }
-  @return var(--#{variables.$variable-prefix}typo-#{$typo}-font-style, normal);
+  @return system.root-style(#{variables.$variable-prefix}typo-#{$typo}-font-style, normal);
 }
 
 @function get-font-weight($typo) {
-  @return var(--#{variables.$variable-prefix}typo-#{$typo}-font-weight, unset);
+  @return system.root-style(#{variables.$variable-prefix}typo-#{$typo}-font-weight, unset);
 }
 
 @function get-font-color($typo) {
   @if not map.has-key(variables.$typography, $typo) {
     @error "Invalid typo for typography specified! Choose one of #{map.keys(variables.$typography)}";
   }
-  @return var(--#{variables.$variable-prefix}typo-#{$typo}-font-color, unset);
+  @return system.root-style(#{variables.$variable-prefix}typo-#{$typo}-font-color, unset);
 }
 
 @function get-letter-spacing($typo) {
-  @return var(
-    --#{variables.$variable-prefix}typo-#{$typo}-letter-spacing,
+  @return system.root-style(
+    #{variables.$variable-prefix}typo-#{$typo}-letter-spacing,
     unset
   );
 }
 
 @function get-text-transform($typo) {
-  @return var(
-    --#{variables.$variable-prefix}typo-#{$typo}-text-transform,
+  @return system.root-style(
+    #{variables.$variable-prefix}typo-#{$typo}-text-transform,
     unset
   );
 }
@@ -59,12 +59,12 @@
   @if not map.has-key(variables.$typography, $typo) {
     @error "Invalid typo for typography specified! Choose one of #{map.keys(variables.$typography)}";
   }
-  @return var(--#{variables.$variable-prefix}typo-#{$typo}-margin-top, 0);
+  @return system.root-style(#{variables.$variable-prefix}typo-#{$typo}-margin-top, 0);
 }
 
 @function get-margin-bottom($typo) {
   @if not map.has-key(variables.$typography, $typo) {
     @error "Invalid typo for typography specified! Choose one of #{map.keys(variables.$typography)}";
   }
-  @return var(--#{variables.$variable-prefix}typo-#{$typo}-margin-bottom, 0);
+  @return system.root-style(#{variables.$variable-prefix}typo-#{$typo}-margin-bottom, 0);
 }

package/scss/typography/mixins.scss

@@ -44,223 +44,6 @@
   }
 }
 
-@mixin _register-typo-variables(
-  $typo,
-  $map,
-  $media: false,
-  $mediaBehavior: false
-) {
-  @if not $media {
-    $defaults: map.merge(
-      (
-        font-family: unset,
-        font-size: unset,
-        line-height: unset,
-        font-style: normal,
-        font-weight: unset,
-        letter-spacing: unset,
-        margin-top: 0,
-        margin-bottom: 0,
-      ),
-      $map
-    );
-
-    @if (map.has-key($map, font-family)) {
-      @include system.add-root-style(
-        #{variables.$variable-prefix}typo-#{$typo}-font-family,
-        string.unquote(map.get($defaults, font-family))
-      );
-    }
-
-    @include system.add-root-style(
-      #{variables.$variable-prefix}typo-#{$typo}-font-size,
-      system.size-unit(map.get($defaults, font-size))
-    );
-
-    @include system.add-root-style(
-      #{variables.$variable-prefix}typo-#{$typo}-line-height,
-      system.size-unit(map.get($defaults, line-height), em)
-    );
-
-    @include system.add-root-style(
-      #{variables.$variable-prefix}typo-#{$typo}-font-style,
-      string.unquote(map.get($defaults, font-style))
-    );
-
-    @include system.add-root-style(
-      #{variables.$variable-prefix}typo-#{$typo}-font-weight,
-      map.get($defaults, font-weight)
-    );
-
-    @if (map.has-key($map, color)) {
-      @include system.add-root-style(
-        #{variables.$variable-prefix}typo-#{$typo}-font-color,
-        colors.get(map.get($defaults, color))
-      );
-    }
-
-    @if (map.has-key($map, letter-spacing)) {
-      @include system.add-root-style(
-        #{variables.$variable-prefix}typo-#{$typo}-letter-spacing,
-        system.size-unit(map.get($defaults, letter-spacing))
-      );
-    }
-
-    @if (map.has-key($map, text-transform)) {
-      @include system.add-root-style(
-        #{variables.$variable-prefix}typo-#{$typo}-text-transform,
-        map.get($defaults, text-transform)
-      );
-    }
-
-    @include system.add-root-style(
-      #{variables.$variable-prefix}typo-#{$typo}-margin-top,
-      system.size-unit(map.get($defaults, margin-top))
-    );
-
-    @include system.add-root-style(
-      #{variables.$variable-prefix}typo-#{$typo}-margin-bottom,
-      system.size-unit(map.get($defaults, margin-bottom))
-    );
-
-    @if map.has-key($map, media) {
-      @each $breakpoint, $breakpointValue in map.get($map, media) {
-        @if $breakpoint == up {
-          @each $upBreakpoint, $upBreakpointValue in $breakpointValue {
-            @include _register-typo-variables(
-              $typo,
-              $upBreakpointValue,
-              $upBreakpoint,
-              up
-            );
-          }
-        } @else if $breakpoint == down {
-          @each $downBreakpoint, $downBreakpointValue in $breakpointValue {
-            @include _register-typo-variables(
-              $typo,
-              $downBreakpointValue,
-              $downBreakpoint,
-              down
-            );
-          }
-        } @else {
-          @include _register-typo-variables(
-            $typo,
-            $breakpointValue,
-            $breakpoint
-          );
-        }
-      }
-    }
-  } @else {
-    @if (map.has-key($map, font-family)) {
-      @include system.add-root-style(
-        #{variables.$variable-prefix}typo-#{$typo}-font-family,
-        string.unquote(map.get($map, font-family)),
-        $media,
-        $mediaBehavior
-      );
-    }
-
-    @if (map.has-key($map, font-size)) {
-      @include system.add-root-style(
-        #{variables.$variable-prefix}typo-#{$typo}-font-size,
-        system.size-unit(map.get($map, font-size)),
-        $media,
-        $mediaBehavior
-      );
-    }
-
-    @if map.has-key($map, line-height) {
-      @include system.add-root-style(
-        #{variables.$variable-prefix}typo-#{$typo}-line-height,
-        system.size-unit(map.get($map, line-height), em),
-        $media,
-        $mediaBehavior
-      );
-    }
-
-    @if map.has-key($map, font-style) {
-      @include system.add-root-style(
-        #{variables.$variable-prefix}typo-#{$typo}-font-style,
-        string.unquote(map.get($map, font-style)),
-        $media,
-        $mediaBehavior
-      );
-    }
-
-    @if map.has-key($map, font-weight) {
-      @include system.add-root-style(
-        #{variables.$variable-prefix}typo-#{$typo}-font-weight,
-        map.get($map, font-weight),
-        $media,
-        $mediaBehavior
-      );
-    }
-
-    @if (map.has-key($map, color)) {
-      @include system.add-root-style(
-        #{variables.$variable-prefix}typo-#{$typo}-font-color,
-        colors.get(map.get($defaults, color))
-      );
-    }
-
-    @if (map.has-key($map, letter-spacing)) {
-      @include system.add-root-style(
-        #{variables.$variable-prefix}typo-#{$typo}-letter-spacing,
-        system.size-unit(map.get($defaults, letter-spacing)),
-        $media,
-        $mediaBehavior
-      );
-    }
-
-    @if (map.has-key($map, text-transform)) {
-      @include system.add-root-style(
-        #{variables.$variable-prefix}typo-#{$typo}-text-transform,
-        map.get($defaults, text-transform),
-        $media,
-        $mediaBehavior
-      );
-    }
-
-    @if map.has-key($map, margin-top) {
-      @if $media == print {
-        @include system.add-root-style(
-          #{variables.$variable-prefix}typo-#{$typo}-margin-top,
-          system.size-unit(map.get($map, margin-top), in),
-          $media,
-          $mediaBehavior
-        );
-      } @else {
-        @include system.add-root-style(
-          #{variables.$variable-prefix}typo-#{$typo}-margin-top,
-          system.size-unit(map.get($map, margin-top)),
-          $media,
-          $mediaBehavior
-        );
-      }
-    }
-
-    @if map.has-key($map, margin-bottom) {
-      @if $media == print {
-        @include system.add-root-style(
-          #{variables.$variable-prefix}typo-#{$typo}-margin-bottom,
-          system.size-unit(map.get($map, margin-bottom), in),
-          $media,
-          $mediaBehavior
-        );
-      } @else {
-        @include system.add-root-style(
-          #{variables.$variable-prefix}typo-#{$typo}-margin-bottom,
-          system.size-unit(map.get($map, margin-bottom)),
-          $media,
-          $mediaBehavior
-        );
-      }
-    }
-  }
-}
-
 @mixin set-font-family($typo, $value) {
   --#{variables.$variable-prefix}typo-#{$typo}-font-family: #{string.unquote(
       $value
@@ -312,10 +95,6 @@
     )};
 }
 
-@each $typo, $values in variables.$typography {
-  @include _register-typo-variables($typo, $values);
-}
-
 @mixin core-styles {
   @each $typo, $values in variables.$typography {
     .#{variables.$class-prefix}typo-#{'' + $typo} {

package/scss/typography/root.scss

@@ -0,0 +1,226 @@
+@use "sass:map";
+@use "sass:string";
+@use "variables";
+@use "../colors";
+@use "../system";
+
+@mixin _register-typo-variables(
+  $typo,
+  $map,
+  $media: false,
+  $mediaBehavior: false
+) {
+  @if not $media {
+    $defaults: map.merge(
+                    (
+                            font-family: unset,
+                            font-size: unset,
+                            line-height: unset,
+                            font-style: normal,
+                            font-weight: unset,
+                            letter-spacing: unset,
+                            margin-top: 0,
+                            margin-bottom: 0,
+                    ),
+                    $map
+    );
+
+    @if (map.has-key($map, font-family)) {
+      @include system.add-root-style(
+                      #{variables.$variable-prefix}typo-#{$typo}-font-family,
+                      string.unquote(map.get($defaults, font-family))
+      );
+    }
+
+    @include system.add-root-style(
+                    #{variables.$variable-prefix}typo-#{$typo}-font-size,
+                    system.size-unit(map.get($defaults, font-size))
+    );
+
+    @include system.add-root-style(
+                    #{variables.$variable-prefix}typo-#{$typo}-line-height,
+                    system.size-unit(map.get($defaults, line-height), em)
+    );
+
+    @include system.add-root-style(
+                    #{variables.$variable-prefix}typo-#{$typo}-font-style,
+                    string.unquote(map.get($defaults, font-style))
+    );
+
+    @include system.add-root-style(
+                    #{variables.$variable-prefix}typo-#{$typo}-font-weight,
+                    map.get($defaults, font-weight)
+    );
+
+    @if (map.has-key($map, color)) {
+      @include system.add-root-style(
+                      #{variables.$variable-prefix}typo-#{$typo}-font-color,
+                      colors.get(map.get($defaults, color))
+      );
+    }
+
+    @if (map.has-key($map, letter-spacing)) {
+      @include system.add-root-style(
+                      #{variables.$variable-prefix}typo-#{$typo}-letter-spacing,
+                      system.size-unit(map.get($defaults, letter-spacing))
+      );
+    }
+
+    @if (map.has-key($map, text-transform)) {
+      @include system.add-root-style(
+                      #{variables.$variable-prefix}typo-#{$typo}-text-transform,
+                      map.get($defaults, text-transform)
+      );
+    }
+
+    @include system.add-root-style(
+                    #{variables.$variable-prefix}typo-#{$typo}-margin-top,
+                    system.size-unit(map.get($defaults, margin-top))
+    );
+
+    @include system.add-root-style(
+                    #{variables.$variable-prefix}typo-#{$typo}-margin-bottom,
+                    system.size-unit(map.get($defaults, margin-bottom))
+    );
+
+    @if map.has-key($map, media) {
+      @each $breakpoint, $breakpointValue in map.get($map, media) {
+        @if $breakpoint == up {
+          @each $upBreakpoint, $upBreakpointValue in $breakpointValue {
+            @include _register-typo-variables(
+                            $typo,
+                            $upBreakpointValue,
+                            $upBreakpoint,
+                            up
+            );
+          }
+        } @else if $breakpoint == down {
+          @each $downBreakpoint, $downBreakpointValue in $breakpointValue {
+            @include _register-typo-variables(
+                            $typo,
+                            $downBreakpointValue,
+                            $downBreakpoint,
+                            down
+            );
+          }
+        } @else {
+          @include _register-typo-variables(
+                          $typo,
+                          $breakpointValue,
+                          $breakpoint
+          );
+        }
+      }
+    }
+  } @else {
+    @if (map.has-key($map, font-family)) {
+      @include system.add-root-style(
+                      #{variables.$variable-prefix}typo-#{$typo}-font-family,
+                      string.unquote(map.get($map, font-family)),
+                      $media,
+                      $mediaBehavior
+      );
+    }
+
+    @if (map.has-key($map, font-size)) {
+      @include system.add-root-style(
+                      #{variables.$variable-prefix}typo-#{$typo}-font-size,
+                      system.size-unit(map.get($map, font-size)),
+                      $media,
+                      $mediaBehavior
+      );
+    }
+
+    @if map.has-key($map, line-height) {
+      @include system.add-root-style(
+                      #{variables.$variable-prefix}typo-#{$typo}-line-height,
+                      system.size-unit(map.get($map, line-height), em),
+                      $media,
+                      $mediaBehavior
+      );
+    }
+
+    @if map.has-key($map, font-style) {
+      @include system.add-root-style(
+                      #{variables.$variable-prefix}typo-#{$typo}-font-style,
+                      string.unquote(map.get($map, font-style)),
+                      $media,
+                      $mediaBehavior
+      );
+    }
+
+    @if map.has-key($map, font-weight) {
+      @include system.add-root-style(
+                      #{variables.$variable-prefix}typo-#{$typo}-font-weight,
+                      map.get($map, font-weight),
+                      $media,
+                      $mediaBehavior
+      );
+    }
+
+    @if (map.has-key($map, color)) {
+      @include system.add-root-style(
+                      #{variables.$variable-prefix}typo-#{$typo}-font-color,
+                      colors.get(map.get($defaults, color))
+      );
+    }
+
+    @if (map.has-key($map, letter-spacing)) {
+      @include system.add-root-style(
+                      #{variables.$variable-prefix}typo-#{$typo}-letter-spacing,
+                      system.size-unit(map.get($defaults, letter-spacing)),
+                      $media,
+                      $mediaBehavior
+      );
+    }
+
+    @if (map.has-key($map, text-transform)) {
+      @include system.add-root-style(
+                      #{variables.$variable-prefix}typo-#{$typo}-text-transform,
+                      map.get($defaults, text-transform),
+                      $media,
+                      $mediaBehavior
+      );
+    }
+
+    @if map.has-key($map, margin-top) {
+      @if $media == print {
+        @include system.add-root-style(
+                        #{variables.$variable-prefix}typo-#{$typo}-margin-top,
+                        system.size-unit(map.get($map, margin-top), in),
+                        $media,
+                        $mediaBehavior
+        );
+      } @else {
+        @include system.add-root-style(
+                        #{variables.$variable-prefix}typo-#{$typo}-margin-top,
+                        system.size-unit(map.get($map, margin-top)),
+                        $media,
+                        $mediaBehavior
+        );
+      }
+    }
+
+    @if map.has-key($map, margin-bottom) {
+      @if $media == print {
+        @include system.add-root-style(
+                        #{variables.$variable-prefix}typo-#{$typo}-margin-bottom,
+                        system.size-unit(map.get($map, margin-bottom), in),
+                        $media,
+                        $mediaBehavior
+        );
+      } @else {
+        @include system.add-root-style(
+                        #{variables.$variable-prefix}typo-#{$typo}-margin-bottom,
+                        system.size-unit(map.get($map, margin-bottom)),
+                        $media,
+                        $mediaBehavior
+        );
+      }
+    }
+  }
+}
+
+@each $typo, $values in variables.$typography {
+  @include _register-typo-variables($typo, $values);
+}

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, useId } from 'vue'
+import { computed, ref } from 'vue'
 import { useArticles, useConfig } from '#composables';
 import { prepareHtmlContent, isDialogStored, addDialogToStorage, getDialogFromStorage } from '#utils';
 
@@ -10,10 +10,22 @@ const props = defineProps<{
 
 const config = useConfig();
 const articles = useArticles();
-const id = ref<string>(`srl-page__dialog-${useId()}`);
+const id = ref<string>(`srl-page__dialog-${props.uuid.replaceAll(' ', '_')}`);
 const content = ref<string>('');
-const dialog = ref<SrlPageDialog | null>(null);
-let dialogStored = false
+
+const dialog = isDialogStored(props.uuid)?
+    getDialogFromStorage(props.uuid):
+    ref<SrlPageDialog | null>(null);
+
+if (!isDialogStored(props.uuid)) {
+  addDialogToStorage(props.uuid, dialog);
+  loadContent();
+}
+
+const state = computed<boolean>(() => {
+  return dialog.value ?
+      dialog.value.dialogState : false
+});
 
 async function loadContent() {
   const article = articles.value.find((article) => article.uuid === props.uuid);
@@ -37,22 +49,8 @@ async function loadContent() {
   }
 }
 
-if (isDialogStored(props.uuid)) {
-  dialogStored = true;
-} else {
-  addDialogToStorage(props.uuid, dialog);
-  loadContent();
-}
-
 async function open() {
-  if (dialog.value) {
-    dialog.value.open();
-  } else {
-    const storage = getDialogFromStorage(props.uuid);
-    storage ?
-        storage.open():
-        console.warn(`Dialog with uuid ${props.uuid} not found in storage.`);
-  }
+  dialog.value?.open();
 }
 </script>
 
@@ -62,7 +60,7 @@ async function open() {
       type="button"
       :aria-controls="id"
       aria-haspopup="dialog"
-      :aria-expanded="dialog?.dialogState ?? false"
+      :aria-expanded="state"
       @click="open"
   >
     <slot />

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

@@ -32,24 +32,25 @@ import { nextTick, ref, onMounted } from 'vue';
 import VRuntimeTemplate from 'vue3-runtime-template';
 import Autoload from '@/Autoload.ts';
 import { useRoute } from 'vue-router';
-import { useArticle, useArticles, useConfig } from '#composables';
+import { useArticle, useConfig } from '#composables';
 import { prepareHtmlContent } from '#utils';
 
 const articleRoot = ref<HTMLDivElement | null>(null);
 const config = useConfig();
 const route = useRoute();
-const articles = useArticles();
 const content = ref<string>('');
 const locale = route.params.locale as string;
 const article = useArticle();
 
 if (article.value) {
   const file = `./html/${locale}/${article.value.name}.html`;
+  const publicationTitle = config.value.settings.publicationName[locale];
+
   try {
     const req = await fetch(file);
     let text = await req.text();
 
-    document.title = article.value.translatedTitle;
+    document.title = `${article.value.translatedTitle} - ${publicationTitle}`;
     content.value = prepareHtmlContent(text);
   } catch (error) {
     console.error(`Failed to load article content from ${file}:`, error);

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

@@ -1,25 +1,23 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, 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);
-const dialogState = ref<boolean>(false);
-
 const header = ref<string>(props.header);
 const content = ref<string>(props.content);
-
+const dialogState = ref<boolean>(false);
 function setDialogContent(template: string) {
   content.value = template;
 }
@@ -30,15 +28,15 @@ function setDialogContentAndOpen(template: string) {
 }
 
 function open() {
-  $el.value?.showModal();
   dialogState.value = true;
+  $el.value?.showModal();
   $el.value?.querySelector('.srl-dialog__main')?.focus();
   Autoload.init($el.value);
 }
 
 function close() {
-  $el.value?.close();
   dialogState.value = false;
+  $el.value?.close();
 }
 
 function clearContent() {
@@ -58,11 +56,11 @@ defineExpose({
 
 <template>
   <dialog
-    ref="$el"
-    id="srl-page__dialog"
-    class="srl-page__dialog"
-    aria-modal="true"
-    @click.stop="close"
+      ref="$el"
+      id="srl-page__dialog"
+      class="srl-page__dialog"
+      aria-modal="true"
+      @click.stop="close"
   >
     <SrlAriaTabChain @click.stop>
       <SrlPageCustomDialog :header="header" :content="content" @close="close" />