@simple-reporting/base 0.1.111 → 0.1.112

package/dev/src/views/DownloadsView.vue

@@ -1,88 +1,88 @@
-<script lang="ts" setup>
-import { computed, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
-import { ArrayToString } from '@/utils/variables'
-
-const route = useRoute()
-const locale = computed(() => {
-  return ArrayToString(route.params.locale)
-})
-const downloadData = ref<NsWowDownloads>({ structure: [] })
-
-async function getDownloads() {
-  const file = `./downloads/downloads_${locale.value}.json`
-  try {
-    const response = await fetch(file)
-    downloadData.value = await response.json()
-  } catch (e) {
-    console.error(`"${file}" could not be loaded.`)
-  }
-}
-
-watch(route, () => getDownloads())
-getDownloads()
-</script>
-
-<template>
-  <article class="srl-download">
-    <h1>Downloads</h1>
-    <h2>Annual Report</h2>
-    <div v-if="downloadData.annualReport">
-      <a target="_blank">{{ downloadData.annualReport?.title }}</a>
-    </div>
-    <h2>Downloads</h2>
-    <transition name="fade">
-      <ul v-if="downloadData.structure.length" class="srl-download__list">
-        <li v-for="(item, index) in downloadData?.structure" :key="index">
-          <a href="" target="_blank">
-            <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>
-            <div>
-              <span class="title">{{ item.title }}</span
-              ><br />
-              <span>{{ item.size }}</span>
-            </div>
-          </a>
-        </li>
-      </ul>
-    </transition>
-  </article>
-</template>
-
-<style scoped lang="scss">
-@use 'nswow';
-
-.srl-download {
-  margin: 0 auto;
-  @include nswow.grid-container();
-
-  &__list {
-    list-style-type: none;
-    padding: 0 0 0 0;
-
-    li {
-      margin-bottom: nswow.system-size-unit(20);
-
-      a {
-        text-decoration: none;
-        display: flex;
-        align-items: center;
-        gap: nswow.system-size-unit(10);
-      }
-    }
-  }
-}
-</style>
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { ArrayToString } from '@/utils/variables'
+
+const route = useRoute()
+const locale = computed(() => {
+  return ArrayToString(route.params.locale)
+})
+const downloadData = ref<NsWowDownloads>({ structure: [] })
+
+async function getDownloads() {
+  const file = `./downloads/downloads_${locale.value}.json`
+  try {
+    const response = await fetch(file)
+    downloadData.value = await response.json()
+  } catch (e) {
+    console.error(`"${file}" could not be loaded.`)
+  }
+}
+
+watch(route, () => getDownloads())
+getDownloads()
+</script>
+
+<template>
+  <article class="srl-download">
+    <h1>Downloads</h1>
+    <h2>Annual Report</h2>
+    <div v-if="downloadData.annualReport">
+      <a target="_blank">{{ downloadData.annualReport?.title }}</a>
+    </div>
+    <h2>Downloads</h2>
+    <transition name="fade">
+      <ul v-if="downloadData.structure.length" class="srl-download__list">
+        <li v-for="(item, index) in downloadData?.structure" :key="index">
+          <a href="" target="_blank">
+            <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>
+            <div>
+              <span class="title">{{ item.title }}</span
+              ><br />
+              <span>{{ item.size }}</span>
+            </div>
+          </a>
+        </li>
+      </ul>
+    </transition>
+  </article>
+</template>
+
+<style scoped lang="scss">
+@use 'nswow';
+
+.srl-download {
+  margin: 0 auto;
+  @include nswow.grid-container();
+
+  &__list {
+    list-style-type: none;
+    padding: 0 0 0 0;
+
+    li {
+      margin-bottom: nswow.system-size-unit(20);
+
+      a {
+        text-decoration: none;
+        display: flex;
+        align-items: center;
+        gap: nswow.system-size-unit(10);
+      }
+    }
+  }
+}
+</style>

package/dev/src/views/HomeView.vue

@@ -1,35 +1,35 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { ArrayToString } from '@/utils/variables'
-import { useRoute } from 'vue-router'
-
-const route = useRoute()
-
-const locale = computed<string>(() => {
-  return ArrayToString(route.params.locale)
-})
-</script>
-
-<template>
-  <div class="srl-main">
-    <h1>Welcome {{ locale }}</h1>
-    <h3>Dokumentation Frontend Toolkit für Komponenten als auch APP:</h3>
-    <p>
-      <a href="https://mmssolutionsio.github.io/mms-reporting-docs/docs/intro" target="_blank"
-        >Dokumentation</a
-      >
-    </p>
-  </div>
-</template>
-
-<style scoped lang="scss">
-@use 'nswow';
-
-.srl-main {
-  padding: nswow.system-size-unit(100) 0;
-  margin-left: auto;
-  margin-right: auto;
-  min-height: 80vh;
-  @include nswow.grid-container();
-}
-</style>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ArrayToString } from '@/utils/variables'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const locale = computed<string>(() => {
+  return ArrayToString(route.params.locale)
+})
+</script>
+
+<template>
+  <div class="srl-main">
+    <h1>Welcome {{ locale }}</h1>
+    <h3>Dokumentation Frontend Toolkit für Komponenten als auch APP:</h3>
+    <p>
+      <a href="https://mmssolutionsio.github.io/mms-reporting-docs/docs/intro" target="_blank"
+        >Dokumentation</a
+      >
+    </p>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use 'nswow';
+
+.srl-main {
+  padding: nswow.system-size-unit(100) 0;
+  margin-left: auto;
+  margin-right: auto;
+  min-height: 80vh;
+  @include nswow.grid-container();
+}
+</style>

package/dev/src/views/PageNotFound.vue

@@ -1,73 +1,73 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div class="srl-notfound">
-    <div class="srl-notfound__inner">
-      <h1>404</h1>
-      <h2>{{ $t('page.notFound') }}</h2>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        fill="currentColor"
-        class="bi bi-robot"
-        viewBox="0 0 16 16"
-      >
-        <path
-          d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5ZM3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.58 26.58 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.933.933 0 0 1-.765.935c-.845.147-2.34.346-4.235.346-1.895 0-3.39-.2-4.235-.346A.933.933 0 0 1 3 9.219V8.062Zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a24.767 24.767 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25.286 25.286 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135Z"
-        />
-        <path
-          d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2V1.866ZM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5Z"
-        />
-      </svg>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-@use 'nswow';
-
-.srl-notfound {
-  margin: 0 auto;
-  @include nswow.grid-container();
-  @include nswow.fonts-core-styles();
-
-  &__inner {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    min-height: 80vh;
-
-    svg {
-      height: 100px;
-      width: 100px;
-      margin-top: 2rem;
-      animation: spin 600ms linear 2;
-
-      @keyframes spin {
-        10%,
-        90% {
-          transform: translate3d(-1px, 0, 0);
-        }
-
-        20%,
-        80% {
-          transform: translate3d(2px, 0, 0);
-        }
-
-        30%,
-        50%,
-        70% {
-          transform: translate3d(-4px, 0, 0);
-        }
-
-        40%,
-        60% {
-          transform: translate3d(4px, 0, 0);
-        }
-      }
-    }
-  }
-}
-</style>
+<script setup lang="ts"></script>
+
+<template>
+  <div class="srl-notfound">
+    <div class="srl-notfound__inner">
+      <h1>404</h1>
+      <h2>{{ $t('page.notFound') }}</h2>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        fill="currentColor"
+        class="bi bi-robot"
+        viewBox="0 0 16 16"
+      >
+        <path
+          d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5ZM3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.58 26.58 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.933.933 0 0 1-.765.935c-.845.147-2.34.346-4.235.346-1.895 0-3.39-.2-4.235-.346A.933.933 0 0 1 3 9.219V8.062Zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a24.767 24.767 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25.286 25.286 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135Z"
+        />
+        <path
+          d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2V1.866ZM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5Z"
+        />
+      </svg>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use 'nswow';
+
+.srl-notfound {
+  margin: 0 auto;
+  @include nswow.grid-container();
+  @include nswow.fonts-core-styles();
+
+  &__inner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    min-height: 80vh;
+
+    svg {
+      height: 100px;
+      width: 100px;
+      margin-top: 2rem;
+      animation: spin 600ms linear 2;
+
+      @keyframes spin {
+        10%,
+        90% {
+          transform: translate3d(-1px, 0, 0);
+        }
+
+        20%,
+        80% {
+          transform: translate3d(2px, 0, 0);
+        }
+
+        30%,
+        50%,
+        70% {
+          transform: translate3d(-4px, 0, 0);
+        }
+
+        40%,
+        60% {
+          transform: translate3d(4px, 0, 0);
+        }
+      }
+    }
+  }
+}
+</style>

package/dev/src/views/SearchView.vue

@@ -1,126 +1,126 @@
-<script lang="ts" setup>
-import { computed, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
-import useConfig from '@/composables/config'
-import { ArrayToString } from '@/utils/variables'
-
-type searchDataType = {
-  title: string
-  content: string
-  link: string
-  translatedTitle: string
-  firstParagraph: string
-}
-
-const config = await useConfig()
-const route = useRoute()
-const isLoading = ref<boolean>(true)
-const searchData = ref<searchDataType[]>([])
-
-const locale = computed<string>(() => {
-  return ArrayToString(route.params.locale)
-})
-
-const searchValue = computed<string>(() => {
-  return route.query.searchValue ? ArrayToString(route.query.searchValue, ' ') : ''
-})
-
-const articles = computed<NsWowArticle[]>(() => {
-  return config.value.articles[locale.value] ?? []
-})
-
-async function getSearchResult() {
-  isLoading.value = true
-  searchData.value = []
-  const routesArray: {
-    uuid: string
-    slug: string
-    name: string
-    translatedTitle: string
-  }[] = []
-
-  articles.value
-    .filter((item) => {
-      return !item.ignoreInSearch
-    })
-    .map((value) => {
-      routesArray.push({
-        uuid: value.uuid,
-        slug: value.slug,
-        name: value.name,
-        translatedTitle: value.translatedTitle
-      })
-    })
-
-  if (routesArray.length) {
-    routesArray.map(async (value) => {
-      const file = `./html/${locale.value}/${value.name}.html`
-      try {
-        const response = await fetch(file)
-        const data = await response.text()
-        if (data.toLowerCase().includes(searchValue.value.toLowerCase())) {
-          const item: searchDataType = {
-            title: `${locale.value}/${value.slug}`,
-            content: data,
-            link: `/${locale.value}/${value.slug}`,
-            translatedTitle: value.translatedTitle,
-            firstParagraph: ''
-          }
-          const doc = new DOMParser().parseFromString(data, 'text/html')
-          const paragraph = doc.querySelector('p')
-          if (paragraph) {
-            item.firstParagraph = paragraph.textContent ?? ''
-          }
-          searchData.value.push(item)
-        }
-
-        searchData.value.sort((a, b) => {
-          return a.title.localeCompare(b.title)
-        })
-
-        isLoading.value = false
-      } catch (e) {
-        console.error(`"${file}" could not be loaded.`)
-      }
-    })
-  }
-}
-
-watch(route, () => getSearchResult())
-getSearchResult()
-</script>
-
-<template>
-  <article class="srl-article">
-    <div class="srl-article-container">
-      <h1>{{ $t('search.title') }}</h1>
-
-      <div v-if="isLoading">Loading...</div>
-      <transition name="fade">
-        <h2 v-if="!isLoading">
-          {{ $t('search.for', { search: searchValue, count: searchData.length }) }}
-        </h2>
-      </transition>
-
-      <transition name="fade">
-        <div v-if="!isLoading && searchValue">
-          <div v-for="(dataItem, index) in searchData" :key="index">
-            <h5>{{ dataItem.translatedTitle }}</h5>
-            <p>{{ dataItem.firstParagraph }}</p>
-            <router-link :to="{ path: dataItem.link }">{{ dataItem.title }}</router-link>
-          </div>
-        </div>
-      </transition>
-    </div>
-  </article>
-</template>
-
-<style scoped lang="scss">
-@use 'nswow';
-
-.srl-article {
-  margin: 0 auto;
-  @include nswow.grid-container();
-  @include nswow.typography-core-styles();
-}
-</style>
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import useConfig from '@/composables/config'
+import { ArrayToString } from '@/utils/variables'
+
+type searchDataType = {
+  title: string
+  content: string
+  link: string
+  translatedTitle: string
+  firstParagraph: string
+}
+
+const config = await useConfig()
+const route = useRoute()
+const isLoading = ref<boolean>(true)
+const searchData = ref<searchDataType[]>([])
+
+const locale = computed<string>(() => {
+  return ArrayToString(route.params.locale)
+})
+
+const searchValue = computed<string>(() => {
+  return route.query.searchValue ? ArrayToString(route.query.searchValue, ' ') : ''
+})
+
+const articles = computed<NsWowArticle[]>(() => {
+  return config.value.articles[locale.value] ?? []
+})
+
+async function getSearchResult() {
+  isLoading.value = true
+  searchData.value = []
+  const routesArray: {
+    uuid: string
+    slug: string
+    name: string
+    translatedTitle: string
+  }[] = []
+
+  articles.value
+    .filter((item) => {
+      return !item.ignoreInSearch
+    })
+    .map((value) => {
+      routesArray.push({
+        uuid: value.uuid,
+        slug: value.slug,
+        name: value.name,
+        translatedTitle: value.translatedTitle
+      })
+    })
+
+  if (routesArray.length) {
+    routesArray.map(async (value) => {
+      const file = `./html/${locale.value}/${value.name}.html`
+      try {
+        const response = await fetch(file)
+        const data = await response.text()
+        if (data.toLowerCase().includes(searchValue.value.toLowerCase())) {
+          const item: searchDataType = {
+            title: `${locale.value}/${value.slug}`,
+            content: data,
+            link: `/${locale.value}/${value.slug}`,
+            translatedTitle: value.translatedTitle,
+            firstParagraph: ''
+          }
+          const doc = new DOMParser().parseFromString(data, 'text/html')
+          const paragraph = doc.querySelector('p')
+          if (paragraph) {
+            item.firstParagraph = paragraph.textContent ?? ''
+          }
+          searchData.value.push(item)
+        }
+
+        searchData.value.sort((a, b) => {
+          return a.title.localeCompare(b.title)
+        })
+
+        isLoading.value = false
+      } catch (e) {
+        console.error(`"${file}" could not be loaded.`)
+      }
+    })
+  }
+}
+
+watch(route, () => getSearchResult())
+getSearchResult()
+</script>
+
+<template>
+  <article class="srl-article">
+    <div class="srl-article-container">
+      <h1>{{ $t('search.title') }}</h1>
+
+      <div v-if="isLoading">Loading...</div>
+      <transition name="fade">
+        <h2 v-if="!isLoading">
+          {{ $t('search.for', { search: searchValue, count: searchData.length }) }}
+        </h2>
+      </transition>
+
+      <transition name="fade">
+        <div v-if="!isLoading && searchValue">
+          <div v-for="(dataItem, index) in searchData" :key="index">
+            <h5>{{ dataItem.translatedTitle }}</h5>
+            <p>{{ dataItem.firstParagraph }}</p>
+            <router-link :to="{ path: dataItem.link }">{{ dataItem.title }}</router-link>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </article>
+</template>
+
+<style scoped lang="scss">
+@use 'nswow';
+
+.srl-article {
+  margin: 0 auto;
+  @include nswow.grid-container();
+  @include nswow.typography-core-styles();
+}
+</style>