@simple-reporting/base 0.0.1

package/dev/src/components/MenuItem/MenuExternal.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const props = defineProps<{
+  label: string
+  url: string
+}>()
+</script>
+
+<template>
+  <span>
+    <a :href="props.url" target="_blank" :title="props.label">{{ props.label }}</a>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      fill="currentColor"
+      viewBox="0 0 16 16"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M6.364 13.5a.5.5 0 0 0 .5.5H13.5a1.5 1.5 0 0 0 1.5-1.5v-10A1.5 1.5 0 0 0 13.5 1h-10A1.5 1.5 0 0 0 2 2.5v6.636a.5.5 0 1 0 1 0V2.5a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H6.864a.5.5 0 0 0-.5.5z"
+      />
+      <path
+        fill-rule="evenodd"
+        d="M11 5.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793l-8.147 8.146a.5.5 0 0 0 .708.708L10 6.707V10.5a.5.5 0 0 0 1 0v-5z"
+      />
+    </svg>
+  </span>
+</template>

package/dev/src/components/MenuItem/index.ts

@@ -0,0 +1,5 @@
+import MenuArticle from '@/components/MenuItem/MenuArticle.vue'
+import MenuEntry from '@/components/MenuItem/MenuEntry.vue'
+import MenuExternal from '@/components/MenuItem/MenuExternal.vue'
+
+export { MenuExternal, MenuArticle, MenuEntry }

package/dev/src/components/PageFooter.vue

@@ -0,0 +1,86 @@
+<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>
+
+<template>
+  <footer class="srl-bg-secondary-light srl-color-on-secondary-light">
+    <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>
+          Made by<br /><a href="https://mmssolutions.io/" target="_blank">mms solutions</a> x
+          <a href="https://www.multivisio.de/" target="_blank">MULTIVISIO</a>
+        </p>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style scoped lang="scss">
+@use 'nswow';
+
+footer {
+  min-height: nswow.system-size-unit(60);
+  padding: nswow.system-size-unit(20) 0;
+
+  .srl-footer {
+    &__inner {
+      margin: 0 auto;
+      @include nswow.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) {
+    display: none;
+  }
+}
+</style>

package/dev/src/components/PageHeader.vue

@@ -0,0 +1,149 @@
+<script lang="ts" setup>
+import { RouterLink } from 'vue-router'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import LanguageSwitch from '@/components/LanguageSwitch.vue'
+
+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()
+}
+</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" />
+      </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>
+  </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);
+      }
+    }
+  }
+
+  @include nswow.grid-media(print) {
+    display: none;
+  }
+}
+</style>

package/dev/src/components/PageModal.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { nextTick, ref } from 'vue'
+
+const content = ref<string | null>(null)
+const state = ref<boolean>(false)
+
+async function setContent(html: string) {
+  content.value = html
+  nextTick(open())
+}
+
+async function open() {
+  state.value = true
+}
+
+function close() {
+  state.value = false
+}
+
+defineExpose({
+  setContent,
+  open,
+  close
+})
+</script>
+
+<template>
+  <div class="modal" :class="{ open: state }">
+    <div class="background srl-bg-shade-200" @click="close" />
+    <div class="content srl-bg-light srl-color-dark" @click.stop>
+      <header>
+        <button title="$t('buttons.close')" @click="close">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <!--!Font Awesome Pro 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.-->
+            <path
+              d="M64 64C46.3 64 32 78.3 32 96V416c0 17.7 14.3 32 32 32H448c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32H64zM0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm180.7 84.7c6.2-6.2 16.4-6.2 22.6 0L256 233.4l52.7-52.7c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6L278.6 256l52.7 52.7c6.2 6.2 6.2 16.4 0 22.6s-16.4 6.2-22.6 0L256 278.6l-52.7 52.7c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6L233.4 256l-52.7-52.7c-6.2-6.2-6.2-16.4 0-22.6z"
+            />
+          </svg>
+        </button>
+      </header>
+      <main v-html="content" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use 'nswow';
+
+.modal {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity ease-out 0.5s;
+  pointer-events: none;
+
+  &.open {
+    pointer-events: all;
+    opacity: 1;
+  }
+}
+
+header {
+  button {
+    width: 50px;
+    height: 50px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.background {
+  position: fixed;
+  inset: 0;
+  z-index: 900;
+}
+
+.content {
+  position: relative;
+  width: 80%;
+  min-height: 80%;
+  max-height: 80%;
+  border-radius: 20px;
+  overflow: hidden;
+  padding: 40px;
+  z-index: 901;
+}
+</style>

package/dev/src/components/PrevNext.vue

@@ -0,0 +1,144 @@
+<script lang="ts" setup>
+import ScrollToTop from '@/components/ScrollToTop.vue'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import useConfig from '@/composables/config'
+import { ArrayToString } from '@/utils/variables'
+
+const config = await useConfig()
+const route = useRoute()
+
+const locale = computed<string>(() => {
+  return ArrayToString(route.params.locale)
+})
+
+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])
+      }
+    }
+  }
+  return res
+})
+
+const activeArticle = computed<number>(() => {
+  return articles.value.findIndex((i) => i.slug === ArrayToString(route.params.slug))
+})
+
+const nextRoute = computed(() => {
+  if (activeArticle.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('/')
+    }
+  }
+})
+
+const prevRoute = computed(() => {
+  if (activeArticle.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('/')
+    }
+  }
+})
+</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>
+</template>
+
+<style scoped lang="scss">
+@use 'nswow';
+
+.srl-nav-holder {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  position: sticky;
+  bottom: 0;
+  margin-bottom: nswow.system-size-unit(10);
+
+  &__nav-btn {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    padding: nswow.system-size-unit(10) nswow.system-size-unit(15);
+
+    svg {
+      transition: all 200ms ease;
+
+      &.left {
+        margin-right: nswow.system-size-unit(10);
+      }
+
+      &.right {
+        margin-left: nswow.system-size-unit(10);
+      }
+    }
+  }
+
+  @include nswow.grid-media(print) {
+    display: none;
+  }
+}
+</style>

package/dev/src/components/ScrollToTop.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+function toTheTop() {
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+}
+</script>
+<template>
+  <div class="srl-scrollToTop srl-bg-primary srl-color-light" @click="toTheTop">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      fill="currentColor"
+      class="bi bi-chevron-up"
+      viewBox="0 0 16 16"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"
+      />
+    </svg>
+    <span>{{ $t('scrollToTop') }}</span>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use 'nswow';
+
+.srl-scrollToTop {
+  position: absolute;
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  bottom: nswow.system-size-unit(10);
+  right: 0;
+  left: 0;
+  z-index: 999;
+  width: nswow.system-size-unit(40);
+  height: nswow.system-size-unit(40);
+
+  span {
+    display: none;
+  }
+
+  &:hover {
+    width: nswow.system-size-unit(180);
+
+    span {
+      display: block;
+      margin: 0 auto;
+    }
+
+    svg {
+      display: none;
+    }
+  }
+
+  @include nswow.grid-media(print) {
+    display: none;
+  }
+}
+</style>