@simple-reporting/base 0.1.111 → 0.1.112

package/dev/src/components/PageFooter.vue

@@ -1,86 +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>
+<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

@@ -1,149 +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>
+<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

@@ -1,95 +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>
+<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>