@simple-reporting/base 0.1.112 → 1.0.0

package/dev/src/components/PageFooter.vue

@@ -1,46 +1,14 @@
-<script lang="ts" setup>
-import { MenuArticle, MenuExternal, MenuEntry } from '@/components/MenuItem'
-import { computed, ref } from 'vue'
-import useConfig from '@/composables/config'
-import { useI18n } from 'vue-i18n'
-
-const { locale } = useI18n()
-const config = await useConfig()
-const navigation = ref<NsWowMenu[]>([])
-
-const currentMenus = computed<NsWowMenus>(() => {
-  return config.value.menus[locale.value] ?? {}
-})
-
-function getLinkByPage(page: string): string {
-  return `/${locale.value}/${page}`
-}
-
-if (currentMenus.value?.footer) {
-  navigation.value = currentMenus.value.footer
-}
-</script>
+<script lang="ts" setup></script>
 
 <template>
-  <footer class="srl-bg-secondary-light srl-color-on-secondary-light">
+  <footer
+    id="srl-page-footer"
+    class="srl-footer srl-bg-primary-1000 srl-color-white-1000"
+    tabindex="-1"
+  >
     <div class="srl-footer__inner">
       <div class="srl-footer__inner-navigation">
         <h2>Footernavigation</h2>
-        <ul>
-          <li v-for="(item, index) in navigation" :key="index">
-            <MenuArticle
-              v-if="item.type === 'Article'"
-              :label="item.label"
-              :page="getLinkByPage(<string>item.page)"
-            />
-            <MenuEntry v-if="item.type === 'MenuEntry'" :label="item.label" />
-            <MenuExternal
-              v-if="item.type === 'ExternalLink'"
-              :label="item.label"
-              :url="<string>item.url"
-            />
-          </li>
-        </ul>
       </div>
       <div class="srl-footer__inner-imprint">
         <p>
@@ -53,33 +21,24 @@ if (currentMenus.value?.footer) {
 </template>
 
 <style scoped lang="scss">
-@use 'nswow';
+@use 'srl';
 
 footer {
-  min-height: nswow.system-size-unit(60);
-  padding: nswow.system-size-unit(20) 0;
+  min-height: srl.system-size-unit(60);
+  padding: srl.system-size-unit(20) 0;
 
   .srl-footer {
     &__inner {
       margin: 0 auto;
-      @include nswow.grid-container();
+      @include srl.grid-container();
 
       &-imprint {
         text-align: center;
       }
-
-      &-navigation {
-        ul {
-          list-style-type: none;
-          padding: 0 0 0 0;
-          display: flex;
-          gap: nswow.system-size-unit(10);
-        }
-      }
     }
   }
 
-  @include nswow.grid-media(print) {
+  @include srl.grid-media(print) {
     display: none;
   }
 }

package/dev/src/components/PageHeader.vue

@@ -1,149 +1,41 @@
 <script lang="ts" setup>
-import { RouterLink } from 'vue-router'
-import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import LanguageSwitch from '@/components/LanguageSwitch.vue'
+import NavLanguages from '@/components/NavLanguages.vue'
+import { useLocale } from '#composables'
 
-const { locale } = useI18n()
-const srlSearch = ref()
-let searchValue = ref('')
-
-function toggleSearchVisible() {
-  srlSearch.value.classList.toggle('visible')
-}
-
-function search() {
-  $router.push(`/${locale}/search?searchValue=${searchValue.value}`)
-  toggleSearchVisible()
-}
+const locale = useLocale()
 </script>
 
 <template>
-  <header class="srl-bg-primary srl-color-light">
-    <div class="srl-header__inner">
-      <router-link class="srl-header__inner-logo" :to="{ path: `/${locale}` }">
-        <img :src="`@/assets/images/mms-logo-white.svg`" alt="logo" />
+  <header id="srl-page-header" class="srl-header" tabindex="-1">
+    <div class="srl-header__container">
+      <router-link :to="`/${locale}`" class="srl-logo">
+        <img class="srl-logo__img" src="@/assets/images/mms-logo-white.svg" alt="MMS Solutions" />
       </router-link>
-      <div class="srl-header__inner-content">
-        <div class="srl-header__inner-languages">
-          <router-link :to="{ path: `/${locale}/downloads` }">
-            <button class="srl-color-light">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                fill="currentColor"
-                class="bi bi-download"
-                viewBox="0 0 16 16"
-              >
-                <path
-                  d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"
-                />
-                <path
-                  d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"
-                />
-              </svg>
-            </button>
-          </router-link>
-          <button class="srl-color-light" @click="toggleSearchVisible">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              fill="currentColor"
-              class="bi bi-search"
-              viewBox="0 0 16 16"
-            >
-              <path
-                d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
-              />
-            </svg>
-          </button>
-          <suspense>
-            <LanguageSwitch />
-          </suspense>
-        </div>
-      </div>
-    </div>
-    <div ref="srlSearch" class="srl-header__search">
-      <input type="search" placeholder="Search ..." v-model="searchValue" @keyup.enter="search" />
     </div>
+    <NavLanguages />
   </header>
 </template>
 
-<style scoped lang="scss">
-@use 'nswow';
-
-header {
-  min-height: nswow.system-size-unit(60);
-  padding: nswow.system-size-unit(10) 0;
-
-  .srl-header {
-    &__inner {
-      margin: 0 auto;
-      @include nswow.grid-container();
-      @include nswow.grid-row();
-
-      &-logo {
-        height: nswow.system-size-unit(60);
-        width: 100%;
-        display: block;
-        @include nswow.grid-col(4, phone);
-        @include nswow.grid-col(3, portrait);
-        @include nswow.grid-col(2, landscape);
-        @include nswow.grid-col(2, desktop);
-
-        img {
-          height: 100%;
-          max-width: 150px;
-        }
-      }
-
-      &-languages {
-        display: flex;
-        justify-content: flex-end;
-        min-height: nswow.system-size-unit(5);
-
-        button {
-          background: transparent;
-          border: none;
-          cursor: pointer;
-          outline: none;
-        }
-      }
-
-      &-content {
-        @include nswow.grid-col(8, phone);
-        @include nswow.grid-col(9, portrait);
-        @include nswow.grid-col(10, landscape);
-        @include nswow.grid-col(10, desktop);
-      }
-    }
-
-    &__search {
-      margin: 0 auto;
-      height: 0;
-      opacity: 0;
-      overflow: hidden;
-      transition: height 100ms linear;
-      @include nswow.grid-container();
-
-      &.visible {
-        min-height: nswow.system-size-unit(40);
-        opacity: 1;
-      }
-
-      input {
-        width: 100%;
-        height: 100%;
-        border: nswow.system-size-unit(1) solid nswow.colors-light();
-        padding: nswow.system-size-unit(5) nswow.system-size-unit(10);
-      }
-    }
+<style lang="scss">
+@use 'srl';
+
+.srl-header {
+  background-color: srl.colors-primary-1000();
+  display: flex;
+  justify-content: center;
+
+  &__container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    max-width: var(--srl-container-max-width);
+    padding-inline: var(--srl-container-padding);
   }
+}
 
-  @include nswow.grid-media(print) {
-    display: none;
-  }
+.srl-logo {
+  display: block;
+  width: 300px;
 }
 </style>

package/dev/src/components/PageMain.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const props = defineProps<{
+  mainNavigation: NsWowNavigationItem[]
+}>()
+</script>
+
+<template>
+  <main id="srl-page-main" tabindex="-1">
+    <RouterView v-slot="{ Component, route }">
+      <component :is="Component" :key="route.fullPath" :mainNavigation="props.mainNavigation" />
+    </RouterView>
+  </main>
+</template>

package/dev/src/components/PrevNext.vue

@@ -1,144 +1,168 @@
 <script lang="ts" setup>
-import ScrollToTop from '@/components/ScrollToTop.vue'
-import { computed } from 'vue'
+import { ref, computed } from 'vue'
 import { useRoute } from 'vue-router'
-import useConfig from '@/composables/config'
-import { ArrayToString } from '@/utils/variables'
+import { isRouterPath } from '#utils'
+
+const props = defineProps<{
+  mainNavigation: NsWowNavigationItem[]
+}>()
 
-const config = await useConfig()
 const route = useRoute()
 
-const locale = computed<string>(() => {
-  return ArrayToString(route.params.locale)
+type PrevNextNavigationItem = {
+  title: string
+  url: string
+}
+
+const prevNextNavigation = ref<PrevNextNavigationItem[]>([])
+
+const scrollY = ref(window.scrollY)
+
+window.addEventListener('scroll', () => {
+  scrollY.value = window.scrollY
 })
+function prevNextHelper(item: NsWowNavigationItem, label: string = '', depth: number = 0) {
+  if (item.href && isRouterPath(item.href)) {
+    const url = item.href
+    const title = label.length > 0 ? `${label}\n${item.label}` : item.label
+    prevNextNavigation.value.push({ title, url })
+  }
 
-const articles = computed<NsWowArticle[]>(() => {
-  const a = config.value.articles[locale.value]
-  const res = []
-  if (a) {
-    for (let i = 0; i < a.length; i++) {
-      if (a[i].originalLanguageOfArticle) {
-        res.push(a[i])
+  if (item.children) {
+    for (const child of item.children) {
+      let nextLabel = ''
+      if (depth !== 0 && item.label !== 'left' && item.label !== 'right') {
+        nextLabel = item.label
       }
+      prevNextHelper(child, nextLabel, depth + 1)
     }
   }
-  return res
-})
+}
 
-const activeArticle = computed<number>(() => {
-  return articles.value.findIndex((i) => i.slug === ArrayToString(route.params.slug))
+for (const item of props.mainNavigation) {
+  prevNextHelper(item)
+}
+
+const currentIndex = computed<number | -1>(() => {
+  return prevNextNavigation.value.findIndex((item) => item.url === route.path)
 })
 
-const nextRoute = computed(() => {
-  if (activeArticle.value === -1) {
+const prevItem = computed(() => {
+  if (currentIndex.value === -1) {
     return null
   }
-  let nextIndex: number = activeArticle.value + 1
-  if (nextIndex >= articles.value.length) {
-    nextIndex = 0
-  }
-  return {
-    params: {
-      locale: locale.value,
-      slug: articles.value[nextIndex].slug.split('/')
-    }
-  }
+  return currentIndex.value > 0
+    ? prevNextNavigation.value[currentIndex.value - 1]
+    : prevNextNavigation.value[prevNextNavigation.value.length - 1]
 })
 
-const prevRoute = computed(() => {
-  if (activeArticle.value === -1) {
+const nextItem = computed(() => {
+  if (currentIndex.value === -1) {
     return null
   }
-  let prevIndex: number = activeArticle.value - 1
-  if (prevIndex < 0) {
-    prevIndex = articles.value.length - 1
-  }
-  return {
-    params: {
-      locale: locale.value,
-      slug: articles.value[prevIndex].slug.split('/')
-    }
-  }
+  return currentIndex.value < prevNextNavigation.value.length - 1
+    ? prevNextNavigation.value[currentIndex.value + 1]
+    : prevNextNavigation.value[0]
 })
+
+function toTop() {
+  window.scrollTo(0, 0)
+  document.querySelector('#srl-page-main')?.focus()
+}
 </script>
 <template>
-  <div class="srl-nav-holder">
-    <router-link
-      v-if="prevRoute"
-      :to="prevRoute"
-      class="srl-nav-holder__nav-btn srl-bg-primary srl-color-light srl-typo-headline3"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        fill="currentColor"
-        class="bi bi-chevron-left left"
-        viewBox="0 0 16 16"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"
-        />
-      </svg>
-      {{ $t('page.prev') }}
-    </router-link>
-    <ScrollToTop />
-    <router-link
-      v-if="nextRoute"
-      :to="nextRoute"
-      class="srl-nav-holder__nav-btn srl-bg-primary srl-color-light srl-typo-headline3"
-    >
-      {{ $t('page.next') }}
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        fill="currentColor"
-        class="bi bi-chevron-right right"
-        viewBox="0 0 16 16"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
-        />
-      </svg>
-    </router-link>
+  <div>
+    <slot />
+    <div class="srl-prev-next">
+      <div class="srl-prev-next__wrap">
+        <button class="srl-to-top" :hidden="scrollY < 500" type="button" @click="toTop">
+          <img src="@/assets/images/toTop.svg" :alt="$t('toTop')" :title="$t('toTop')" />
+        </button>
+        <router-link
+          v-if="prevItem"
+          class="srl-page-prev"
+          :to="prevItem.url"
+          :title="prevItem.title"
+        >
+          <img src="@/assets/images/prev.svg" :alt="$t('pagePrev')" />
+        </router-link>
+        <router-link
+          v-if="nextItem"
+          class="srl-page-next"
+          :to="nextItem.url"
+          :title="nextItem.title"
+        >
+          <img src="@/assets/images/next.svg" :alt="$t('pageNext')" />
+        </router-link>
+      </div>
+    </div>
   </div>
 </template>
 
-<style scoped lang="scss">
-@use 'nswow';
+<style lang="scss">
+@use 'srl';
+
+body:has(.srl-to-top) {
+  .srl-article-root {
+    padding-block-end: srl.system-size-unit(60) !important;
+  }
+}
 
-.srl-nav-holder {
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
+.srl-prev-next {
+  pointer-events: none;
   position: sticky;
   bottom: 0;
-  margin-bottom: nswow.system-size-unit(10);
+  z-index: 800;
+  max-width: calc(var(--srl-container-max-width) + var(--srl-container-padding) * 2);
+  padding-inline: var(--srl-container-padding);
+  margin-inline: auto;
+  padding-block-end: var(--srl-spacer-medium);
+  height: calc(var(--srl-spacer-L) + srl.system-size-unit(44));
 
-  &__nav-btn {
+  &__wrap {
     display: flex;
-    cursor: pointer;
-    align-items: center;
-    padding: nswow.system-size-unit(10) nswow.system-size-unit(15);
+    position: relative;
+    justify-content: space-between;
+    width: 100%;
+  }
+}
 
-    svg {
-      transition: all 200ms ease;
+.srl-to-top {
+  pointer-events: auto;
+  width: srl.system-size-unit(44);
+  height: srl.system-size-unit(44);
+  position: absolute;
+  top: srl.system-size-unit(-52);
+  right: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+  transition: all ease-out 0.3s;
+  opacity: 1;
 
-      &.left {
-        margin-right: nswow.system-size-unit(10);
-      }
+  &:not([hidden]) {
+    display: block;
+  }
 
-      &.right {
-        margin-left: nswow.system-size-unit(10);
-      }
-    }
+  &[hidden] {
+    pointer-events: none;
+    opacity: 0;
   }
 
-  @include nswow.grid-media(print) {
-    display: none;
+  img {
+    display: block;
+  }
+}
+
+.srl-page-prev,
+.srl-page-next {
+  pointer-events: auto;
+  width: srl.system-size-unit(44);
+  height: srl.system-size-unit(44);
+  display: block;
+  img {
+    display: block;
   }
 }
 </style>

package/dev/src/components/SrlPage/KFCApplication/hooks/kfcData.ts

@@ -1,8 +1,8 @@
-import useConfig from '@/composables/config'
+import useConfig from 'srl/composables/config'
 import generateKFCJson from '@/components/SrlPage/KFCApplication/services/xlsxParser'
 
 export default async function useKfcData() {
-  const config = await useConfig()
+  const config = useConfig()
   /** @todo überprüfen warum die daten nicht korrekt mit config.value.settings.languages generiert werden */
   //return await generateKFCJson(config.value.settings.languages);
   return await generateKFCJson(['de', 'en', 'fr', 'it'])