@simple-reporting/base 1.0.22 → 1.0.24

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/App.vue

@@ -36,20 +36,24 @@
  * to other components in the application.
  */
 import App from '@/App.vue';
-import { watch } from 'vue'
+import { onMounted, watch } from 'vue'
 import { useCssStyles } from '#composables'
+import { setMounted } from '#utils'
 
-const styleElement = document.createElement('style');
-document.head.appendChild(styleElement);
+const styleElement = document.createElement('style')
+document.head.appendChild(styleElement)
 
-const styleContent = useCssStyles();
+const styleContent = useCssStyles()
 watch(
   styleContent.value,
   (newStyles) => {
-    styleElement.innerHTML = newStyles.join('');
+    styleElement.innerHTML = newStyles.join('')
   },
   { immediate: true },
 );
+onMounted(() => {
+  setMounted(true)
+});
 </script>
 
 <template>

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

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import {computed, onMounted, ref, useId} from 'vue'
+import { useRoute } from 'vue-router'
+import { isAccordionAnchored, setAccordionAnchored } from '#utils'
+
+const props = withDefaults(defineProps<{
+  toggleSelector?: string
+  contentSelector?: string
+  wrapperSelector?: string
+  openClass?: string
+  duration?: number
+}>(), {
+  toggleSelector: '.srl-article-accordion__toggle',
+  contentSelector: '.srl-article-accordion__content',
+  wrapperSelector: '.srl-article-accordion__wrapper',
+  openClass: 'open',
+  duration: 300,
+})
+
+const route = useRoute()
+
+const id = useId()
+const rootEl = ref<HTMLDivElement>()
+const toggle = ref<HTMLButtonElement>()
+const content = ref<HTMLDivElement>()
+const wrapper = ref<HTMLDivElement>()
+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()
+}
+
+function close() {
+  toggle.value?.setAttribute('aria-expanded', 'false')
+  content.value?.classList.remove(props.openClass)
+  setTimeout(() => {
+    wrapper.value?.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
+
+  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.addEventListener('click', () => {
+      toggle.value?.getAttribute('aria-expanded') === 'true' ? close() : open()
+    })
+
+    if (route.hash) {
+      if (rootEl.value.id && rootEl.value.id === route.hash) {
+        open()
+        isAccordionAnchored() || setAccordionAnchored(true)
+      } else {
+        const targetEl = rootEl.value?.querySelector<HTMLElement>(route.hash)
+        if (targetEl) {
+          open()
+          if (!isAccordionAnchored()) {
+            setAccordionAnchored(true)
+            setTimeout(() => {
+              rootEl.value?.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start',
+              })
+            }, 200)
+          }
+        }
+      }
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="srl-article-accordion" ref="rootEl" tabindex="-1">
+    <slot/>
+  </div>
+</template>
+
+<style lang="scss">
+.srl-article-accordion {
+  &__content {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows v-bind(transition) ease-out;
+
+    &.open {
+      grid-template-rows: 1fr;
+    }
+  }
+  &__wrapper {
+    overflow: hidden;
+  }
+}
+</style>

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

@@ -1,17 +1,32 @@
 <script setup lang="ts">
-import { ref, useId } from 'vue';
+import { computed, ref } from 'vue'
 import { useArticles, useConfig } from '#composables';
-import { prepareHtmlContent } from '#utils';
+import { prepareHtmlContent, isDialogStored, addDialogToStorage, getDialogFromStorage } from '#utils';
 
 const props = defineProps<{
   uuid: string;
+  anchor?: string;
 }>();
 
 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);
+
+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);
   if (article) {
@@ -20,35 +35,41 @@ async function loadContent() {
       const req = await fetch(file);
       const text = await req.text();
       content.value = prepareHtmlContent(text);
+      // Do something with anchor if provided
+      /*
+      if (props.anchor) {
+        nextTick(() => {
+          // Do action
+        });
+      }
+       */
     } catch (error) {
       console.error(`Failed to load article content from ${file}:`, error);
     }
   }
 }
 
-loadContent();
 async function open() {
-  dialog.value.open();
+  dialog.value?.open();
 }
 </script>
 
 <template>
   <button
-    class="srl-dialog-button"
-    type="button"
-    :aria-controls="id"
-    aria-haspopup="dialog"
-    :aria-expanded="dialog?.dialogState ?? false"
-    @click="open"
+      class="srl-dialog-button"
+      type="button"
+      :aria-controls="id"
+      aria-haspopup="dialog"
+      :aria-expanded="state"
+      @click="open"
   >
     <slot />
-    <Teleport to="body">
+    <Teleport v-if="content" to="body">
       <SrlPageDialog
-        v-if="content"
-        :id="id"
-        ref="dialog"
-        :content="content"
-        @close="expanded = false"
+          :id="id"
+          ref="dialog"
+          :content="content"
+          @close="expanded = false"
       />
     </Teleport>
   </button>