@simple-reporting/base 0.1.112 → 1.0.0

package/dev/src/assets/scss/placeholders.scss

@@ -0,0 +1,226 @@
+@use "srl/helpers";
+@use "srl";
+
+%srl-trim-margins {
+  @include helpers.trim-margins;
+}
+
+%srl-grid-base {
+  margin-left: auto;
+  margin-right: auto;
+  @include srl.grid-container();
+  @include srl.grid-row();
+}
+
+%srl-grid-reset {
+  padding: 0;
+  margin-left: 0;
+  margin-right: 0;
+  max-width: 100%;
+  display: block;
+}
+
+%srl-regular-width {
+  // Mobile
+  @include srl.grid-col(4);
+
+  // Mobile landscape
+  @include srl.grid-col(4, phone-ls);
+
+  // Tablet portrait
+  @include srl.grid-col(8, tablet-pt);
+
+  // Tablet landscape
+  @include srl.grid-col(8, tablet-ls);
+  @include srl.grid-offset(2, tablet-ls);
+
+  // Desktop
+  @include srl.grid-col(6, desktop);
+  @include srl.grid-offset(3, desktop);
+
+  // Desktop large
+  @include srl.grid-col(6, desktop-large);
+  @include srl.grid-offset(3, desktop-large);
+}
+
+%srl-wide-width {
+  // Mobile
+  @include srl.grid-col(4);
+
+  // Mobile landscape
+  @include srl.grid-col(4, phone-ls);
+
+  // Tablet portrait
+  @include srl.grid-col(8, tablet-pt);
+
+  // Tablet landscape
+  @include srl.grid-col(12, tablet-ls);
+  @include srl.grid-offset(0, tablet-ls);
+
+  // Desktop
+  @include srl.grid-col(12, desktop);
+  @include srl.grid-offset(0, desktop);
+
+  // Desktop large
+  @include srl.grid-col(12, desktop-large);
+  @include srl.grid-offset(0, desktop-large);
+}
+
+/*
+  Quote without an image wide with
+*/
+%srl-quote-wide-width {
+  // Mobile
+  @include srl.grid-col(4);
+
+  // Mobile landscape
+  @include srl.grid-col(4, phone-ls);
+
+  // Tablet portrait
+  @include srl.grid-col(8, tablet-pt);
+
+  // Tablet landscape
+  @include srl.grid-col(10, tablet-ls);
+  @include srl.grid-offset(1, tablet-ls);
+
+  // Desktop
+  @include srl.grid-col(8, desktop);
+  @include srl.grid-offset(2, desktop);
+
+  // Desktop large
+  @include srl.grid-col(8, desktop-large);
+  @include srl.grid-offset(2, desktop-large);
+}
+
+/*
+  Quote with an image regular with
+  Just the image
+*/
+%srl-quote-with-image-image-regular-width {
+  // Mobile
+  @include srl.grid-col(4);
+
+  // Mobile landscape
+  @include srl.grid-col(4, phone-ls);
+
+  // Tablet portrait
+  @include srl.grid-col(3, tablet-pt);
+
+  // Tablet landscape
+  @include srl.grid-col(3, tablet-ls);
+  @include srl.grid-offset(2, tablet-ls);
+
+  // Desktop
+  @include srl.grid-col(2, desktop);
+  @include srl.grid-offset(3, desktop);
+
+  // Desktop large
+  @include srl.grid-col(2, desktop-large);
+  @include srl.grid-offset(3, desktop-large);
+}
+
+/*
+  Quote with an image regular with
+  Just the text
+*/
+%srl-quote-with-image-text-regular-width {
+  // Mobile
+  @include srl.grid-col(4);
+
+  // Mobile landscape
+  @include srl.grid-col(4, phone-ls);
+
+  // Tablet portrait
+  @include srl.grid-col(5, tablet-pt);
+
+  // Tablet landscape
+  @include srl.grid-col(5, tablet-ls);
+  @include srl.grid-offset(5, tablet-ls);
+
+  // Desktop
+  @include srl.grid-col(4, desktop);
+  @include srl.grid-offset(5, desktop);
+
+  // Desktop large
+  @include srl.grid-col(4, desktop-large);
+  @include srl.grid-offset(5, desktop-large);
+}
+
+/*
+  Quote with an image wide with
+  Just the image
+*/
+%srl-quote-with-image-image-wide-width {
+  // Mobile
+  @include srl.grid-col(4);
+
+  // Mobile landscape
+  @include srl.grid-col(4, phone-ls);
+
+  // Tablet portrait
+  @include srl.grid-col(3, tablet-pt);
+
+  // Tablet landscape
+  @include srl.grid-col(3, tablet-ls);
+  @include srl.grid-offset(1, tablet-ls);
+
+  // Desktop
+  @include srl.grid-col(2, desktop);
+  @include srl.grid-offset(2, desktop);
+
+  // Desktop large
+  @include srl.grid-col(2, desktop-large);
+  @include srl.grid-offset(2, desktop-large);
+}
+
+/*
+  Quote with an image wide with
+  Just the text
+*/
+%srl-quote-with-image-text-wide-width {
+  // Mobile
+  @include srl.grid-col(4);
+
+  // Mobile landscape
+  @include srl.grid-col(4, phone-ls);
+
+  // Tablet portrait
+  @include srl.grid-col(5, tablet-pt);
+
+  // Tablet landscape
+  @include srl.grid-col(7, tablet-ls);
+  @include srl.grid-offset(4, tablet-ls);
+
+  // Desktop
+  @include srl.grid-col(6, desktop);
+  @include srl.grid-offset(4, desktop);
+
+  // Desktop large
+  @include srl.grid-col(6, desktop-large);
+  @include srl.grid-offset(4, desktop-large);
+}
+
+/*
+  Aside width
+*/
+%srl-aside-width {
+  // Mobile
+  @include srl.grid-col(4);
+
+  // Mobile landscape
+  @include srl.grid-col(4, phone-ls);
+
+  // Tablet portrait
+  @include srl.grid-col(8, tablet-pt);
+
+  // Tablet landscape
+  @include srl.grid-col(2, tablet-ls);
+
+  // Desktop
+  @include srl.grid-col(2, desktop);
+  @include srl.grid-offset(1, desktop);
+
+  // Desktop large
+  @include srl.grid-col(2, desktop-large);
+  @include srl.grid-offset(1, desktop-large);
+}

package/dev/src/assets/scss/print.scss

@@ -1 +1 @@
-@use 'nswow';
+@use 'srl';

package/dev/src/assets/scss/web.scss

@@ -1 +1,32 @@
-@use 'nswow';
+@use "srl";
+@use "placeholders";
+
+.srl-grid {
+  @extend %srl-grid-base;
+
+  .srl-grid {
+    @extend %srl-grid-reset;
+  }
+}
+
+.srl-grid__inner {
+  @extend %srl-regular-width;
+
+  .srl-wide-width & {
+    @extend %srl-wide-width;
+  }
+
+  .srl-quote.srl-wide-width & {
+    @extend %srl-quote-wide-width;
+  }
+}
+
+.srl-grid__aside {
+  @extend %srl-trim-margins;
+  @extend %srl-aside-width;
+}
+
+.srl-grid__content {
+  @extend %srl-trim-margins;
+  @extend %srl-regular-width;
+}

package/dev/src/assets/scss/word.scss

@@ -1,2 +1,2 @@
-@use 'nswow';
+@use 'srl';
 @use 'print';

package/dev/src/components/BypassLinks.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const pointer = ref<NsWowNavigationItem[]>([
+  {
+    label: t('toMainNavigation'),
+    attributes: {
+      id: 'srl-to-main-navigation'
+    },
+    callback: () => {
+      const elem: HTMLDivElement | null = document.querySelector('#srl-page-navigation')
+      if (elem) {
+        elem.querySelector('button')?.focus()
+      }
+    }
+  },
+  {
+    label: t('toMainContent'),
+    attributes: {
+      id: 'srl-to-main-content'
+    },
+    callback: () => {
+      const elem: HTMLDivElement | null = document.querySelector('#srl-page-main')
+      if (elem) {
+        elem.focus()
+      }
+    }
+  },
+  {
+    label: t('toFooter'),
+    attributes: {
+      id: 'srl-to-footer'
+    },
+    callback: () => {
+      const elem: HTMLDivElement | null = document.querySelector('#srl-page-footer')
+      if (elem) {
+        elem.focus()
+      }
+    }
+  }
+])
+</script>
+
+<template>
+  <nav class="srl-page__keyboardpointer" id="srl-page-keyboardpointer" tabindex="-1">
+    <SrlMenu name="keyboardpointer" :menu="pointer" />
+  </nav>
+</template>
+
+<style lang="scss">
+@use 'srl';
+
+.srl-page__keyboardpointer {
+  overflow: hidden;
+  height: 0;
+
+  &:has(button:focus) {
+    height: auto;
+    @include srl.spacer-padding-block(200);
+  }
+
+  ul {
+    list-style: none;
+    margin: 0 auto;
+    padding: 0 var(--srl-container-padding);
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    column-gap: var(--srl-gutter-column-gap);
+    row-gap: var(--srl-gutter-row-gap);
+    max-width: var(--srl-container-max-width);
+  }
+
+  li {
+    margin: 0 0 0 srl.system-size-unit(-15);
+    padding: 0;
+  }
+
+  button {
+    @include srl.typography-paragraph();
+    padding-block: srl.system-size-unit(5);
+    padding-inline: srl.system-size-unit(15);
+    background-color: transparent;
+    border: 0;
+  }
+}
+</style>

package/dev/src/components/MainNavigation.vue

@@ -1,209 +1,15 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import useConfig from '@/composables/config'
-import { MenuArticle, MenuEntry, MenuExternal } from '@/components/MenuItem'
-
-const { locale } = useI18n()
-const config = await useConfig()
-const subNavigationVisible = ref<boolean>(false)
-const activeSubmenu = ref<NsWowMenu[]>([])
-const activeSubSubmenu = ref<NsWowMenu[]>([])
-
-const currentMenus = computed(() => {
-  return config.value.menus[locale.value] ?? {}
-})
-
-const currentMenu = computed(() => {
-  const m = currentMenus.value.menuMain
-  return m ?? []
-})
-
-const currentArticles = computed<NsWowArticle[]>(() => {
-  return config.value.articles[locale.value] ?? []
-})
-
-function getLinkByPage(page: string): string {
-  const currentPage = currentArticles.value.find((element) => element.uuid === page)
-  return currentPage ? `/${locale.value}/${currentPage.slug}` : ''
-}
-
-function activateSubmenu(index: string | number): void {
-  const menu = currentMenu.value[index]
-  if (menu) {
-    activeSubmenu.value = menu.submenuEntries ?? []
-
-    if (!subNavigationVisible.value) {
-      subNavigationVisible.value = !subNavigationVisible.value
-    }
-  }
-}
-
-function closeSubmenu() {
-  subNavigationVisible.value = false
-}
+const props = defineProps<{
+  mainNavigation: NsWowNavigationItem[]
+}>()
 </script>
 
 <template>
-  <nav class="srl-navigation">
-    <div class="srl-navigation__menuMain srl-bg-secondary-light">
-      <div class="srl-navigation__menuMain-inner">
-        <ul>
-          <li
-            class="srl-typo-copy1"
-            v-for="(level1Item, level1ItemIndex) in currentMenu"
-            :class="level1Item.type"
-          >
-            <MenuArticle
-              v-if="level1Item.type === 'Article'"
-              :label="level1Item.label"
-              :page="getLinkByPage(<string>level1Item.page)"
-              @click="closeSubmenu()"
-            />
-            <MenuEntry
-              v-if="level1Item.type === 'MenuEntry'"
-              :label="level1Item.label"
-              @click="activateSubmenu(level1ItemIndex)"
-            />
-            <MenuExternal
-              v-if="level1Item.type === 'ExternalLink'"
-              :label="level1Item.label"
-              :url="level1Item.url"
-            />
-          </li>
-          <li
-            class="srl-typo-copy1"
-            v-if="subNavigationVisible"
-            @click="subNavigationVisible = false"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              fill="currentColor"
-              class="bi bi-x-lg"
-              viewBox="0 0 16 16"
-            >
-              <path
-                d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"
-              />
-            </svg>
-          </li>
-        </ul>
-      </div>
-    </div>
-
-    <transition name="fade">
-      <div class="srl-navigation__subNav srl-bg-secondary-light">
-        <div class="srl-navigation__subNav-inner">
-          <ul v-if="activeSubmenu.length && subNavigationVisible">
-            <li class="srl-typo-copy1" v-for="(level2Item, level2ItemIndex) in activeSubmenu">
-              <MenuArticle
-                v-if="level2Item.type === 'Article'"
-                :label="level2Item.label"
-                :page="getLinkByPage(<string>level2Item.page)"
-                @click="closeSubmenu()"
-              />
-              <MenuEntry v-if="level2Item.type === 'MenuEntry'" :label="level2Item.label" />
-              <MenuExternal
-                v-if="level2Item.type === 'ExternalLink'"
-                :label="level2Item.label"
-                :url="<string>level2Item.url"
-              />
-
-              <ul>
-                <li
-                  class="srl-typo-copy1"
-                  v-for="(level3Item, index) in level2Item && level2Item.submenuEntries"
-                >
-                  <MenuArticle
-                    v-if="level3Item.type === 'Article'"
-                    :label="level3Item.label"
-                    :page="getLinkByPage(<string>level3Item.page)"
-                    @click="closeSubmenu()"
-                  />
-                  <MenuEntry v-if="level3Item.type === 'MenuEntry'" :label="level3Item.label" />
-                  <MenuExternal
-                    v-if="level3Item.type === 'ExternalLink'"
-                    :label="level3Item.label"
-                    :url="<string>level3Item.url"
-                  />
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </transition>
+  <nav id="srl-page-navigation" class="srl-navigation" tabindex="-1">
+    <SrlMenu name="main-navigation" :menu="props.mainNavigation" class="srl-main-navigation" />
   </nav>
 </template>
 
 <style lang="scss">
-@use 'nswow';
-
-.srl-navigation {
-  &__menuMain,
-  &__subNav {
-    &-inner {
-      margin: 0 auto;
-      @include nswow.grid-container();
-
-      ul {
-        margin: 0 0 0 0;
-        padding: 0 0 0 0;
-        list-style-type: none;
-
-        li {
-          a {
-            text-decoration: none;
-          }
-        }
-      }
-    }
-  }
-
-  &__menuMain {
-    &-inner {
-      ul {
-        display: flex;
-        align-items: center;
-        gap: nswow.system-size-unit(20);
-
-        li {
-          position: relative;
-          padding: nswow.system-size-unit(10) nswow.system-size-unit(20);
-          cursor: pointer;
-
-          &:hover {
-            background: nswow.colors-primary();
-            color: nswow.colors-light();
-          }
-        }
-      }
-    }
-  }
-
-  &__subNav {
-    border-bottom: nswow.system-size-unit(1) solid nswow.colors-shade-800();
-
-    &-inner {
-      ul {
-        display: flex;
-        flex-direction: column;
-
-        li {
-          display: flex;
-          align-items: center;
-          position: relative;
-          padding: nswow.system-size-unit(5) nswow.system-size-unit(20);
-          cursor: pointer;
-        }
-      }
-    }
-  }
-
-  @include nswow.grid-media(print) {
-    display: none;
-  }
-}
+@use 'srl';
 </style>

package/dev/src/components/NavLanguages.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+import { computed } from 'vue'
+import Tr from '@/i18n/translation.ts'
+
+import { useConfig, useArticle } from '#composables'
+
+const { locale } = useI18n()
+
+const config = useConfig()
+const article = useArticle()
+
+const languages = computed<NsWowNavigationItem[]>(() => {
+  if (!article.value) {
+    return []
+  }
+  const uuid = article.value.uuid
+  const res: NsWowNavigationItem = []
+  if (uuid) {
+    for (const locale of config.value.settings.languages) {
+      const slug = config.value.articles[locale].find((a) => a.uuid === uuid)?.slug || ''
+      res.push({
+        label: locale.toUpperCase(),
+        href: article.value.index ? `/${locale}` : `/${locale}/${slug}`,
+        callback: () => {
+          Tr.switchLanguage(locale)
+        }
+      })
+    }
+  }
+  return res
+})
+</script>
+
+<template>
+  <nav class="srl-language-switch srl-py-medium">
+    <SrlMenu class="srl-gap-medium" name="language-switch" :menu="languages" />
+  </nav>
+</template>
+
+<style lang="scss">
+@use 'srl';
+
+.srl-language-switch {
+  ul {
+    list-style: none;
+    display: flex;
+    padding: 0;
+    margin: 0;
+  }
+  a {
+    color: srl.colors-white-1000();
+    text-decoration: none;
+    text-transform: uppercase;
+  }
+}
+</style>