@simple-reporting/base 1.0.23 → 1.0.24

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/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" />

package/srl/.srl/utils/pageState.ts

@@ -42,9 +42,9 @@ export function addDialogToStorage(uuid: string, refSrlPageDialog: Ref<SrlPageDi
     pageState.dialogStorage[uuid] = refSrlPageDialog
 }
 
-export function getDialogFromStorage(uuid: string): SrlPageDialog | null {
+export function getDialogFromStorage(uuid: string): Ref<SrlPageDialog> | null {
     return isDialogStored(uuid)?
-        pageState.dialogStorage[uuid].value : null
+        pageState.dialogStorage[uuid] : null
 }
 
 export function getDialogStorage() : DialogStorage {

package/srl/srl/pdf.scss

@@ -1,2 +0,0 @@
-@use 'config';
-@forward '@simple-reporting/base/scss/pdf';