@simple-reporting/base 0.1.112 → 1.0.1

package/dev/src/App.vue

@@ -1,44 +1,33 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import PageHeader from '@/components/PageHeader.vue'
+import PageMain from '@/components/PageMain.vue'
 import PageFooter from '@/components/PageFooter.vue'
 import MainNavigation from '@/components/MainNavigation.vue'
-import { watch } from 'vue'
-import { useRoute } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import { ArrayToString } from '@/utils/variables'
-import PageModal from '@/components/PageModal.vue'
+import BypassLinks from '@/components/BypassLinks.vue'
+import { useMenu } from '#composables'
 
-const route = useRoute()
-const { locale } = useI18n()
-const modal = ref()
-
-async function modalContent(html: string) {
-  await modal.value.setContent(html)
-}
-
-defineExpose({
-  modalContent
-})
-
-watch(route, () => {
-  const paramLocale = ArrayToString(route.params.locale)
-  if (paramLocale !== locale.value) {
-    locale.value = paramLocale
-  }
-})
+const mainNavigation = useMenu('menuMain')
 </script>
 
 <template>
-  <PageHeader />
-  <suspense>
-    <MainNavigation />
-  </suspense>
-  <suspense>
-    <RouterView />
-  </suspense>
-  <suspense>
+  <div class="srl-page__wrap">
+    <BypassLinks />
+    <PageHeader />
+    <MainNavigation :mainNavigation="mainNavigation" />
+    <PageMain :mainNavigation="mainNavigation" />
     <PageFooter />
-  </suspense>
-  <PageModal ref="modal" />
+  </div>
 </template>
+
+<style lang="scss">
+@use 'srl';
+.srl-page__wrap {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+
+  #srl-page-main {
+    flex: 1 1 auto;
+  }
+}
+</style>

package/dev/src/Autoload.ts

@@ -1,4 +1,4 @@
-import ArticleAutoloader from 'nswow/ArticleAutoloader'
+import ArticleAutoloader from 'srl/ArticleAutoloader'
 
 const ClassAutoLoader = new ArticleAutoloader()
 

package/dev/src/Dialog.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import VRuntimeTemplate from 'vue3-runtime-template'
+import SvgClose from '@/components/Svg/Close.vue'
+
+const props = withDefaults(
+  defineProps<{
+    header?: string
+    content: string
+  }>(),
+  {
+    header: '',
+    content: ''
+  }
+)
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+function close() {
+  emit('close')
+}
+</script>
+
+<template>
+  <div class="srl-dialog srl-bg-light srl-color-dark" @click.stop>
+    <header class="srl-dialog__header">
+      <h2 v-if="props.header !== ''" class="srl-dialog__title" v-html="props.header" />
+      <button
+        type="button"
+        class="srl-dialog__close"
+        :title="$t('modalClose')"
+        :aria-label="$t('modalClose')"
+        @click="close"
+      >
+        <SvgClose :title="$t('modalClose')" />
+      </button>
+    </header>
+    <main class="srl-dialog__main srl-article-root" tabindex="-1">
+      <VRuntimeTemplate v-if="props.content !== ''" :template="props.content" />
+    </main>
+  </div>
+</template>
+
+<style lang="scss">
+@use 'srl';
+
+body:has(.srl-page__dialog[open]) {
+  overflow: hidden;
+}
+
+.srl-page__dialog {
+  display: block;
+  padding: 0;
+  border: 0;
+  border-radius: srl.system-size-unit(16);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s;
+
+  &::backdrop {
+    background-color: rgba(0, 0, 0, 0.3);
+    z-index: -1;
+  }
+
+  &[open] {
+    opacity: 1;
+    pointer-events: all;
+  }
+}
+
+.srl-dialog {
+  width: 80vw;
+  height: 80vh;
+
+  &__close {
+    width: srl.system-size-unit(50);
+    height: srl.system-size-unit(50);
+    position: absolute;
+    top: 0;
+    right: srl.system-size-unit(20);
+    background: transparent;
+    border: none;
+    padding: 0;
+    margin: 0;
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__main {
+    padding: srl.system-size-unit(40);
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+}
+</style>

package/dev/src/assets/fonts/Inter/inter.scss

@@ -0,0 +1,17 @@
+@font-face {
+  font-family: 'Inter';
+  src: url('assets/fonts/Inter/Inter-SemiBold.woff2') format('woff2'),
+  url('assets/fonts/Inter/Inter-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('assets/fonts/Inter/Inter-Regular.woff2') format('woff2'),
+  url('assets/fonts/Inter/Inter-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}

package/dev/src/assets/images/next.svg

@@ -0,0 +1,12 @@
+<svg viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_2327_3788)">
+        <rect width="44" height="44" fill="white"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M20.0254 15.9395L26.0959 21.8996L20.0446 28.0609L17.9043 25.9587L21.8531 21.9382L17.9236 18.0801L20.0254 15.9395Z" fill="#004F9F"/>
+    </g>
+    <rect x="0.5" y="0.5" width="43" height="43" stroke="#004F9F"/>
+    <defs>
+        <clipPath id="clip0_2327_3788">
+            <rect width="44" height="44" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>

package/dev/src/assets/images/prev.svg

@@ -0,0 +1,12 @@
+<svg viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_2327_3777)">
+        <rect width="44" height="44" fill="white"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M23.9746 28.0605L17.9041 22.1004L23.9554 15.9391L26.0957 18.0413L22.1469 22.0618L26.0764 25.9199L23.9746 28.0605Z" fill="#004F9F"/>
+    </g>
+    <rect x="0.5" y="0.5" width="43" height="43" stroke="#004F9F"/>
+    <defs>
+        <clipPath id="clip0_2327_3777">
+            <rect width="44" height="44" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>

package/dev/src/assets/images/toTop.svg

@@ -0,0 +1,12 @@
+<svg viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_2327_3783)">
+        <rect width="44" height="44" fill="white"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M15.9395 23.9746L21.8996 17.9041L28.0609 23.9554L25.9587 26.0957L21.9382 22.1469L18.0801 26.0764L15.9395 23.9746Z" fill="#004F9F"/>
+    </g>
+    <rect x="0.5" y="0.5" width="43" height="43" stroke="#004F9F"/>
+    <defs>
+        <clipPath id="clip0_2327_3783">
+            <rect width="44" height="44" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>

package/dev/src/assets/scss/app.scss

@@ -1,4 +1,4 @@
-@use 'nswow';
+@use 'srl';
 @use 'web';
 
 .fade-enter-from {

package/dev/src/assets/scss/{ldd.scss → editor.scss}

@@ -1,15 +1,15 @@
-@use 'nswow';
+@use 'srl';
 @use 'web';
 
 .ns-temp-highlight {
-  background: nswow.colors-primary();
+  background: srl.colors-primary-1000();
 }
 
-$editor-color-nswow: nswow.colors-shade-200();
+$editor-color-srl: srl.colors-shade-200();
 
 span.ns-nowrap {
   --b: 1px; /* thickness of the border */
-  --c: #{$editor-color-nswow}; /* color of the border */
+  --c: #{$editor-color-srl}; /* color of the border */
   --w: 6px; /* width of border */
   border: var(--b) solid #0000; /* space for the border */
   --_g: #0000 90deg, var(--c) 0;
@@ -22,6 +22,6 @@ span.ns-nowrap {
 }
 
 span.ns-key-figure {
-  color: nswow.colors-on-primary();
-  background-color: nswow.colors-primary();
+  color: srl.colors-white-1000();
+  background-color: srl.colors-primary-1000();
 }

package/dev/src/assets/scss/general.scss

@@ -1,17 +1,59 @@
-@use 'nswow';
+@use 'srl';
 @use 'sass:string';
+@use 'sass:map';
 
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+$font-weight-bold: map.get(srl.$meta, font, weight, bold);
 
-@page {
-  margin: 0;
-  size: A4;
+body {
+  color: srl.colors-black-1000();
 }
 
-body {
-  @if nswow.fonts-is-default() {
-    font-family: string.unquote(nswow.fonts-get-default());
-  } @else {
-    font-family: 'Comic Sans MS', sans-serif;
-  }
+/*
+  Images
+*/
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+/*
+  Bold styles
+*/
+[class*="bold"],
+strong,
+b {
+    font-weight: #{$font-weight-bold};
+}
+
+/*
+  Subscripts and superscripts
+*/
+.subscript,
+sub,
+.superscript,
+sup {
+  font-size: 60%;
+  font-variant-numeric: tabular-nums;
+  line-height: 0; // prevents normal text from getting too much height
 }
+
+.subscript,
+sub {
+  vertical-align: sub;
+}
+
+.superscript,
+sup {
+  vertical-align: super;
+}
+
+/*
+  Nowrap's
+*/
+span {
+  &[class*="nowrap"],
+  &[class*="key-figure"] {
+    white-space: nowrap;
+  }
+}

package/dev/src/assets/scss/pdf.scss

@@ -1,2 +1,138 @@
-@use 'nswow';
+@use 'srl';
+@use 'placeholders';
 @use 'print';
+@use 'sass:map';
+
+$image-quality: map.get(srl.$meta, pdf, image-quality);
+$page-margin-top: srl.system-size-unit(map.get(srl.$meta, pdf, margin, top));
+$page-margin-right: srl.system-size-unit(map.get(srl.$meta, pdf, margin, right));
+$page-margin-bottom: srl.system-size-unit(map.get(srl.$meta, pdf, margin, bottom));
+$page-margin-left: srl.system-size-unit(map.get(srl.$meta, pdf, margin, left));
+
+/*
+  Basic styles for PDF
+*/
+img {
+  image-rendering: auto;
+  -ro-image-resampling: $image-quality;
+  -ro-pdf-tag-type: "Figure";
+
+  &[alt] {
+    -ro-pdf-tag-alt: attr(alt);
+  }
+}
+
+/*
+  PDF chapter navigation and publication title
+*/
+.srl-publication-title {
+  position: running(publicationTitle);
+  @include srl.typography-pdf-header()
+}
+
+.srl-chapter-navigation {
+  position: running(chapterNavigation);
+}
+
+.srl-chapter-navigation__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  @include srl.typography-pdf-header()
+}
+
+/*
+  Basic layout for PDF
+*/
+@page {
+  margin: (
+          $page-margin-top
+          $page-margin-right
+          $page-margin-bottom
+          $page-margin-left
+  );
+  counter-increment: page 1;
+  -ro-bleed-width: 0mm;
+  -ro-media-size: A4;
+  -ro-crop-size: media;
+  -ro-truncate-margin-after-break: always;
+  -ro-truncate-margin-before-break: always;
+
+  @top-left-corner {
+    content: element(publicationTitle);
+    position: absolute;
+    top: srl.spacer-get(300);
+    left: $page-margin-left;
+  }
+
+  @top-left {
+    content: element(chapterNavigation);
+    position: absolute;
+    top: srl.spacer-get(300);
+    left: srl.grid-calculate-pdf-col-span-plus-one-gutter(2);
+  }
+
+  @top-right-corner {
+    content: counter(page);
+    position: absolute;
+    top: srl.spacer-get(300);
+    right: $page-margin-right;
+    @include srl.typography-pdf-header()
+  }
+}
+
+/*
+  Page breaks for PDF
+*/
+.srl-chapter,
+.srl-article {
+  break-after: always;
+
+  &:last-child {
+    break-after: avoid;
+  }
+}
+
+.srl-pdf-pagebreak {
+  break-after: always;
+}
+
+[class*="category-note-"] {
+  break-after: unset;
+  margin-top: srl.spacer-get(400);
+
+  &:last-child {
+    break-after: always;
+  }
+}
+
+/*
+  Layout
+*/
+.srl-grid {
+  display: flex;
+  justify-content: flex-end;
+
+  .srl-grid {
+    display: block;
+  }
+}
+
+.srl-grid__inner {
+  @include srl.grid-pdf-flex-col(6);
+
+  .srl-wide-width & {
+    @include srl.grid-pdf-flex-col(8);
+  }
+}
+
+.srl-grid__aside {
+  @extend %srl-trim-margins;
+  @include srl.grid-pdf-flex-col(2);
+}
+
+.srl-grid__content {
+  @extend %srl-trim-margins;
+  @include srl.grid-pdf-flex-col(6);
+}