@simple-reporting/base 0.1.111 → 1.0.0

package/dev/src/components/SrlPage/KFCApplication/scss/_kfc-loading.scss

@@ -1,40 +1,40 @@
-@use 'nswow';
-
-.loading-text {
-  grid-column: auto / span 4;
-  text-align: center;
-
-  @include nswow.grid-media-up(portrait) {
-    grid-column: auto / span 8;
-  }
-}
-
-.loader-container {
-  display: flex;
-  justify-self: center;
-  grid-column: auto / span 4;
-
-  @include nswow.grid-media-up(portrait) {
-    grid-column: auto / span 8;
-  }
-}
-
-.loader {
-  display: inline-block;
-  width: 100px;
-  padding: 8px;
-  aspect-ratio: 1;
-  border-radius: 50%;
-  background: var(--srl-color-primary);
-  --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
-  -webkit-mask: var(--_m);
-  mask: var(--_m);
-  -webkit-mask-composite: source-out;
-  mask-composite: subtract;
-  animation: l3 1s infinite linear;
-}
-@keyframes l3 {
-  to {
-    transform: rotate(1turn);
-  }
-}
+@use 'srl';
+
+.loading-text {
+  grid-column: auto / span 4;
+  text-align: center;
+
+  @include srl.grid-media-up(portrait) {
+    grid-column: auto / span 8;
+  }
+}
+
+.loader-container {
+  display: flex;
+  justify-self: center;
+  grid-column: auto / span 4;
+
+  @include srl.grid-media-up(portrait) {
+    grid-column: auto / span 8;
+  }
+}
+
+.loader {
+  display: inline-block;
+  width: 100px;
+  padding: 8px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: var(--srl-color-primary);
+  --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
+  -webkit-mask: var(--_m);
+  mask: var(--_m);
+  -webkit-mask-composite: source-out;
+  mask-composite: subtract;
+  animation: l3 1s infinite linear;
+}
+@keyframes l3 {
+  to {
+    transform: rotate(1turn);
+  }
+}

package/dev/src/components/SrlPage/KFCApplication/scss/_srl-button-kfc.scss

@@ -1,21 +1,21 @@
-@use 'nswow';
-
-.srl-button-kfc {
-  padding: 0;
-  margin: 0;
-  background: none;
-  -webkit-appearance: none;
-  border: none;
-  display: flex;
-  flex-wrap: nowrap;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  gap: nswow.system-size-unit(12);
-  cursor: pointer;
-  color: var(--srl-color-dark);
-
-  &:hover {
-    color: var(--srl-color-primary);
-  }
-}
+@use 'srl';
+
+.srl-button-kfc {
+  padding: 0;
+  margin: 0;
+  background: none;
+  -webkit-appearance: none;
+  border: none;
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: srl.system-size-unit(12);
+  cursor: pointer;
+  color: var(--srl-color-dark);
+
+  &:hover {
+    color: var(--srl-color-primary);
+  }
+}

package/dev/src/components/Svg/Close.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const props = defineProps<{
+  title?: string
+}>()
+</script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <title v-if="props.title" v-text="props.title" />
+    <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>
+</template>

package/dev/src/entries/main.ts

@@ -0,0 +1,4 @@
+import initProject from '#plugins/initProject.ts'
+initProject().then((app) => {
+  app.mount('#app')
+})

package/dev/src/entries/pdf.ts

@@ -0,0 +1,2 @@
+import '#imports/pdf.scss'
+import * as Awesomizr from 'srl/Awesomizr.js'

package/dev/src/i18n/index.ts

@@ -1,51 +1,21 @@
-import { createI18n, type I18n, type I18nOptions, type LocaleMessages } from 'vue-i18n'
-import useConfig from '@/composables/config'
-
-let i18n: I18n | undefined = undefined
-const initI18n = async function () {
-  if (!i18n) {
-    const config = await useConfig()
-    const defaultMessagesImport = import.meta.glob('@/locales/*.json', {
-      eager: true,
-      import: 'default'
-    })
-    const defaultMessages: LocaleMessages<any> = {}
-
-    for (const path in defaultMessagesImport) {
-      const matched = path.match(/([A-Za-z0-9-_]+)\./i)
-      if (matched && matched.length > 1) {
-        const locale = matched[1]
-        defaultMessages[locale] = defaultMessagesImport[path]
-      }
-    }
-
-    const file = `./json/translations_hosting.json`
-    try {
-      const responseMessages = await fetch(file)
-      if (responseMessages.ok) {
-        const importMessages: LocaleMessages<any> = await responseMessages.json()
-        for (const lang in importMessages) {
-          if (typeof defaultMessages[lang] !== 'undefined') {
-            importMessages[lang] = Object.assign(defaultMessages[lang], importMessages[lang])
-          }
-        }
-      }
-    } catch (e) {
-      console.error(`"${file}" could not be loaded.`)
-    }
-
-    const options: I18nOptions = {
-      legacy: false,
-      locale: config.value.settings.defaultLanguage,
-      fallbackLocale: config.value.settings.defaultLanguage,
-      availableLocales: Object.keys(defaultMessages),
-      globalInjection: true,
-      messages: defaultMessages
-    }
-
-    i18n = createI18n<false, typeof options>(options)
-  }
-  return i18n
-}
-
-export { initI18n, i18n }
+import { createI18n, type I18n, type I18nOptions, type LocaleMessages } from 'vue-i18n'
+import useConfig from '#composables/config'
+
+let i18n: I18n | undefined = undefined
+
+function initI18n() {
+  const config = useConfig()
+  const options: I18nOptions = {
+    legacy: false,
+    locale: config.value.settings.defaultLanguage,
+    fallbackLocale: config.value.settings.defaultLanguage,
+    availableLocales: Object.keys(config.value.translations),
+    globalInjection: true,
+    messages: config.value.translations
+  }
+
+  i18n = createI18n<false, typeof options>(options)
+  return i18n
+}
+
+export { initI18n, i18n }

package/dev/src/i18n/translation.ts

@@ -1,85 +1,85 @@
-import useConfig from '@/composables/config'
-import { i18n } from '@/i18n'
-import type { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
-
-let config = null
-useConfig().then((c) => (config = c))
-
-const Translate = {
-  isLocaleSupported(locale: string) {
-    // <--- 1
-    return Translate.supportedLocales.includes(locale)
-  },
-
-  getUserLocale() {
-    // <--- 2
-    const locale: string = window.navigator.language || Translate.defaultLocale
-    return {
-      locale: locale,
-      localeNoRegion: locale.split('-')[0]
-    }
-  },
-
-  getPersistedLocale(): string | null {
-    const persistedLocale = localStorage.getItem('user-locale')
-    if (persistedLocale && Translate.isLocaleSupported(persistedLocale)) {
-      return persistedLocale
-    } else {
-      return null
-    }
-  },
-
-  guessDefaultLocale(): string {
-    const userPersistedLocale = Translate.getPersistedLocale()
-    if (userPersistedLocale) {
-      return userPersistedLocale
-    }
-    const userPreferredLocale = Translate.getUserLocale()
-    if (Translate.isLocaleSupported(userPreferredLocale.locale)) {
-      return userPreferredLocale.locale
-    }
-    if (Translate.isLocaleSupported(userPreferredLocale.localeNoRegion)) {
-      return userPreferredLocale.localeNoRegion
-    }
-
-    return Translate.defaultLocale
-  },
-
-  get defaultLocale() {
-    return config.value.settings.defaultLanguage
-  },
-
-  get supportedLocales(): string[] {
-    return config.value.settings.languages
-  },
-
-  set currentLocale(newLocale: string) {
-    i18n.global.locale.value = newLocale
-  },
-
-  async switchLanguage(newLocale: string) {
-    Translate.currentLocale = newLocale
-    const objHtml = document.querySelector('html')
-    if (objHtml) {
-      objHtml.setAttribute('lang', newLocale)
-    }
-    localStorage.setItem('user-locale', newLocale)
-  },
-
-  async routeMiddleware(
-    to: RouteLocationNormalized,
-    _from: RouteLocationNormalized,
-    next: NavigationGuardNext
-  ) {
-    const paramLocale = to.params.locale
-    if (typeof paramLocale === 'string') {
-      if (!Translate.isLocaleSupported(paramLocale)) {
-        return next(Translate.guessDefaultLocale())
-      }
-      await Translate.switchLanguage(paramLocale)
-    }
-    return next()
-  }
-}
-
-export default Translate
+import { i18n } from '@/i18n'
+import type { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
+import useConfig from '#composables/config'
+
+const config = useConfig()
+
+const Translate = {
+  isLocaleSupported(locale: string) {
+    // <--- 1
+    return Translate.supportedLocales.includes(locale)
+  },
+
+  getUserLocale() {
+    // <--- 2
+    const locale: string = window.navigator.language || Translate.defaultLocale
+    return {
+      locale: locale,
+      localeNoRegion: locale.split('-')[0]
+    }
+  },
+
+  getPersistedLocale(): string | null {
+    const persistedLocale = localStorage.getItem('user-locale')
+    if (persistedLocale && Translate.isLocaleSupported(persistedLocale)) {
+      return persistedLocale
+    } else {
+      return null
+    }
+  },
+
+  guessDefaultLocale(): string {
+    const userPersistedLocale = Translate.getPersistedLocale()
+    if (userPersistedLocale) {
+      return userPersistedLocale
+    }
+    const userPreferredLocale = Translate.getUserLocale()
+    if (Translate.isLocaleSupported(userPreferredLocale.locale)) {
+      return userPreferredLocale.locale
+    }
+    if (Translate.isLocaleSupported(userPreferredLocale.localeNoRegion)) {
+      return userPreferredLocale.localeNoRegion
+    }
+
+    return Translate.defaultLocale
+  },
+
+  get defaultLocale() {
+    return config.value.settings.defaultLanguage
+  },
+
+  get supportedLocales(): string[] {
+    return config.value.settings.languages
+  },
+
+  set currentLocale(newLocale: string) {
+    i18n.global.locale.value = newLocale
+  },
+
+  switchLanguage(newLocale: string) {
+    Translate.currentLocale = newLocale
+    const objHtml = document.querySelector('html')
+    if (objHtml) {
+      objHtml.setAttribute('lang', newLocale)
+      config.value.locale = newLocale
+    }
+    localStorage.setItem('user-locale', newLocale)
+  },
+
+  routeMiddleware(
+    to: RouteLocationNormalized,
+    _from: RouteLocationNormalized,
+    next: NavigationGuardNext
+  ) {
+    const paramLocale = to.params.locale
+    if (typeof paramLocale === 'string') {
+      if (!Translate.isLocaleSupported(paramLocale)) {
+        return next(Translate.guessDefaultLocale())
+      }
+      Translate.switchLanguage(paramLocale)
+    }
+    return next()
+  }
+}
+
+export default Translate

package/dev/src/locales/de.json

@@ -1,15 +1,9 @@
-{
-  "page": {
-    "next": "Nächste Seite",
-    "prev": "Vorherige Seite",
-    "notFound": "Seite nicht gefunden"
-  },
-  "search": {
-    "title": "Suchergebnisse",
-    "for": "Ihre Suche nach {search} ergab {count} Treffer"
-  },
-  "scrollToTop": "Nach oben scrollen",
-  "buttons": {
-    "close": "Schließen"
-  }
-}
+{
+  "toMainNavigation": "Zur Hauptnavigation",
+  "toMainContent": "Zum Inhalt",
+  "toFooter": "Zum Footer",
+  "pagePrev": "Vorherige Seite",
+  "pageNext": "Nächste Seite",
+  "toTop": "An den Seitenanfang",
+  "modalClose": "Fenster schließen"
+}

package/dev/src/locales/en.json

@@ -1,15 +1,9 @@
-{
-  "page": {
-    "next": "Next page",
-    "prev": "Previous page",
-    "notFound": "Page not found"
-  },
-  "search": {
-    "title": "Search results",
-    "for": "Your search for {search} returned {count} hits"
-  },
-  "scrollToTop": "Scroll to top",
-  "buttons": {
-    "close": "Close"
-  }
-}
+{
+  "toMainNavigation": "To main navigation",
+  "toMainContent": "To main content",
+  "toFooter": "To footer",
+  "pagePrev": "Previous page",
+  "pageNext": "Next page",
+  "toTop": "Back to top",
+  "modalClose": "Close window"
+}

package/dev/src/router/index.ts

@@ -1,47 +1,44 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import Tr from '@/i18n/translation'
-import HomeView from '@/views/HomeView.vue'
-import SearchView from '@/views/SearchView.vue'
-import DownloadsView from '@/views/DownloadsView.vue'
-import ArticleView from '@/views/ArticleView.vue'
-import PageNotFound from '@/views/PageNotFound.vue'
-
-const router = createRouter({
-  history: createWebHistory(import.meta.BASE_URL),
-  scrollBehavior() {
-    window.scrollTo(0, 0)
-  },
-  routes: [
-    {
-      path: '/:locale?',
-      name: 'home',
-      component: HomeView,
-      beforeEnter: Tr.routeMiddleware
-    },
-    {
-      path: '/:locale/search',
-      name: 'search',
-      component: SearchView,
-      beforeEnter: Tr.routeMiddleware
-    },
-    {
-      path: '/:locale/downloads',
-      name: 'downloads',
-      component: DownloadsView,
-      beforeEnter: Tr.routeMiddleware
-    },
-    {
-      path: '/:locale/404',
-      name: 'pageNotFound',
-      component: PageNotFound,
-      beforeEnter: Tr.routeMiddleware
-    },
-    {
-      path: '/:locale/:slug+',
-      component: ArticleView,
-      beforeEnter: Tr.routeMiddleware
-    }
-  ]
-})
-
-export default router
+import { createRouter, createWebHistory } from 'vue-router'
+import Tr from '@/i18n/translation'
+import HomeView from '@/views/HomeView.vue'
+import ArticleView from '@/views/ArticleView.vue'
+import PageNotFound from '@/views/PageNotFound.vue'
+
+const routes = [
+  {
+    path: '/:locale?',
+    name: 'home',
+    component: HomeView,
+    beforeEnter: Tr.routeMiddleware
+  },
+  {
+    path: '/:locale/:slug+',
+    component: ArticleView,
+    beforeEnter: Tr.routeMiddleware
+  },
+  {
+    path: '/:locale/404',
+    name: 'pageNotFound',
+    component: PageNotFound,
+    beforeEnter: Tr.routeMiddleware
+  }
+]
+
+if (import.meta.env.DEV) {
+  routes.push({
+    path: '/:locale/dev',
+    name: 'dev',
+    component: () => import('@/views/DevView.vue'),
+    beforeEnter: Tr.routeMiddleware
+  })
+}
+
+const router = createRouter({
+  history: createWebHistory(import.meta.BASE_URL),
+  scrollBehavior() {
+    window.scrollTo(0, 0)
+  },
+  routes: routes
+})
+
+export default router

package/dev/src/views/ArticleView.vue

@@ -1,77 +1,12 @@
-<script setup lang="ts">
-import { ref, nextTick, computed, watch, onMounted, markRaw } from 'vue'
-import { useRoute } from 'vue-router'
-import useConfig from '@/composables/config'
-import Autoload from '@/Autoload'
-import PrevNext from '@/components/PrevNext.vue'
-import { useRouter } from 'vue-router'
-import { ArrayToString } from '@/utils/variables'
-
-const config = await useConfig()
-const router = useRouter()
-const route = useRoute()
-const articleContent = ref<HTMLDivElement | undefined>()
-const output = ref<string>('')
-const locale = computed<string>(() => {
-  return ArrayToString(route.params.locale)
-})
-const slug = computed<string>(() => {
-  return ArrayToString(route.params.slug)
-})
-async function getContent() {
-  const currentPage =
-    config.value.articles[locale.value] &&
-    config.value.articles[locale.value].find((i) => {
-      return i.slug === slug.value
-    })
-  let res = ''
-  if (currentPage) {
-    const file = `./html/${locale.value}/${currentPage.name}.html`
-    try {
-      const response = await fetch(file)
-      res = await response.text()
-      output.value = res
-      await nextTick(() => {
-        if (articleContent.value) {
-          Autoload.init(articleContent.value)
-        }
-      })
-    } catch (e) {
-      console.error(`"${file}" could not be loaded.`)
-      await router.push(`/${locale.value}/404`)
-    }
-  } else {
-    await router.push(`/${locale.value}/404`)
-  }
-}
-
-watch(route, async () => await getContent())
-onMounted(async () => {
-  await getContent()
-})
-</script>
-
-<template>
-  <article>
-    <transition name="fade">
-      <div v-if="output.length" ref="articleContent" class="srl-article-root" v-html="output" />
-    </transition>
-    <PrevNext />
-  </article>
-</template>
-
-<style scoped lang="scss">
-@use 'nswow';
-
-article {
-  padding-bottom: nswow.system-size-unit(50);
-}
-</style>
-
-<style scoped lang="scss">
-@use 'nswow';
-
-.srl-article-root {
-  margin-bottom: nswow.system-size-unit(50);
-}
-</style>
+<script setup lang="ts">
+import PrevNext from '@/components/PrevNext.vue'
+const props = defineProps<{
+  mainNavigation: NsWowNavigationItem[]
+}>()
+</script>
+
+<template>
+  <PrevNext :mainNavigation="props.mainNavigation">
+    <SrlArticleRoot />
+  </PrevNext>
+</template>