@simple-reporting/base 0.1.112 → 1.0.1

package/dev/nswow/grid.scss

@@ -1,2 +0,0 @@
-@use 'config';
-@forward '@simple-reporting/base/scss/grid';

package/dev/nswow/helpers.scss

@@ -1,2 +0,0 @@
-@use 'config';
-@forward '@simple-reporting/base/scss/helpers';

package/dev/nswow/meta.scss

@@ -1,2 +0,0 @@
-@use 'config';
-@forward '@simple-reporting/base/scss/meta';

package/dev/nswow/spacer.scss

@@ -1,2 +0,0 @@
-@use 'config';
-@forward '@simple-reporting/base/scss/spacer';

package/dev/nswow/system.scss

@@ -1,2 +0,0 @@
-@use 'config';
-@forward '@simple-reporting/base/scss/system';

package/dev/nswow/typography.scss

@@ -1,3 +0,0 @@
-@use 'config';
-@forward '@simple-reporting/base/scss/typography';
-@use '@simple-reporting/base/scss/typography';

package/dev/nswow.config.json

@@ -1,293 +0,0 @@
-{
-  "fonts": {
-    "default-font": "Roboto, sans-serif",
-    "font-base-path": "../src/assets/fonts"
-  },
-  "meta": {
-    "padding": {
-      "tiny": 4,
-      "base": 8,
-      "small": 16,
-      "medium": 24,
-      "large": 32
-    },
-    "spacer": {
-      "small": 48,
-      "medium": 64,
-      "large": 96,
-      "extra-large": 192
-    }
-  },
-  "typography": {
-    "typography": [
-      {
-        "name": "display1",
-        "font-size": 72,
-        "line-height": 1.4,
-        "font-style": "normal",
-        "font-weight": 600,
-        "margin-bottom": 24
-      },
-      {
-        "name": "display2",
-        "font-size": 64,
-        "line-height": 1.4,
-        "font-style": "normal",
-        "font-weight": 600,
-        "margin-bottom": 24
-      },
-      {
-        "name": "display3",
-        "font-size": 58,
-        "line-height": 1.4,
-        "font-style": "normal",
-        "font-weight": 600,
-        "margin-bottom": 24
-      },
-      {
-        "name": "headline1",
-        "font-size": 48,
-        "line-height": 1.6,
-        "font-style": "normal",
-        "font-weight": 600,
-        "margin-bottom": 16
-      },
-      {
-        "name": "headline2",
-        "font-size": 40,
-        "line-height": 1.6,
-        "font-style": "normal",
-        "font-weight": 600,
-        "margin-bottom": 16
-      },
-      {
-        "name": "headline3",
-        "font-size": 34,
-        "line-height": 1.6,
-        "font-style": "normal",
-        "font-weight": 600,
-        "margin-bottom": 16
-      },
-      {
-        "name": "headline4",
-        "font-size": 28,
-        "line-height": 1.6,
-        "font-style": "normal",
-        "font-weight": 600,
-        "margin-bottom": 16
-      },
-      {
-        "name": "headline5",
-        "font-size": 24,
-        "line-height": 1.6,
-        "font-style": "normal",
-        "font-weight": 600,
-        "margin-bottom": 16
-      },
-      {
-        "name": "headline6",
-        "font-size": 20,
-        "line-height": 1.6,
-        "font-style": "normal",
-        "font-weight": 600,
-        "margin-bottom": 16
-      },
-      {
-        "name": "copy1",
-        "font-size": 16,
-        "line-height": 1.6,
-        "font-style": "normal",
-        "font-weight": 400,
-        "margin-bottom": 8
-      },
-      {
-        "name": "copy2",
-        "font-size": 14,
-        "line-height": 1.6,
-        "font-style": "normal",
-        "font-weight": 400,
-        "margin-bottom": 8
-      },
-      {
-        "name": "copy3",
-        "font-size": 12,
-        "line-height": 1.6,
-        "font-style": "normal",
-        "font-weight": 400,
-        "margin-bottom": 8
-      },
-      {
-        "name": "blockquote",
-        "font-size": 18,
-        "line-height": 1.6,
-        "font-style": "italic",
-        "font-weight": 300,
-        "margin-bottom": 8
-      },
-      {
-        "name": "lead",
-        "font-size": 18,
-        "line-height": 1.6,
-        "font-style": "normal",
-        "font-weight": 500,
-        "margin-bottom": 8
-      }
-    ]
-  },
-  "colors": {
-    "colors": [
-      {
-        "name": "light",
-        "color": "#ffffff"
-      },
-      {
-        "name": "on-light",
-        "color": "#000000"
-      },
-      {
-        "name": "dark",
-        "color": "#000000"
-      },
-      {
-        "name": "on-dark",
-        "color": "#ffffff"
-      },
-      {
-        "name": "primary",
-        "color": "#E50000"
-      },
-      {
-        "name": "on-primary",
-        "color": "#ffffff"
-      },
-      {
-        "name": "primary-dark",
-        "color": "#5227CC"
-      },
-      {
-        "name": "on-primary-dark",
-        "color": "#ffffff"
-      },
-      {
-        "name": "secondary-light",
-        "color": "#EBE5FC"
-      },
-      {
-        "name": "on-secondary-light",
-        "color": "#000000"
-      },
-      {
-        "name": "secondary",
-        "color": "#6C757D"
-      },
-      {
-        "name": "on-secondary",
-        "color": "#ffffff"
-      },
-      {
-        "name": "secondary-dark",
-        "color": "#54595E"
-      },
-      {
-        "name": "on-secondary-dark",
-        "color": "#ffffff"
-      },
-      {
-        "name": "secondary-light",
-        "color": "#ABB5BE"
-      },
-      {
-        "name": "on-secondary-light",
-        "color": "#000000"
-      },
-      {
-        "name": "shade",
-        "color": "#6C757D"
-      }
-    ]
-  },
-  "spacer": {
-    "spacer": {
-      "tiny": {
-        "size": 16
-      },
-      "small": {
-        "size": 24
-      },
-      "medium": {
-        "size": 28,
-        "media": {
-          "up": {
-            "landscape": 32
-          }
-        }
-      },
-      "large": {
-        "size": 36,
-        "media": {
-          "up": {
-            "landscape": 48
-          }
-        }
-      },
-      "extra-large": {
-        "size": 50,
-        "media": {
-          "up": {
-            "landscape": 64
-          }
-        }
-      }
-    }
-  },
-  "grid": {
-    "containers": {
-      "print": {
-        "padding": 32
-      },
-      "phone": {
-        "padding": 16
-      },
-      "portrait": {
-        "padding": 16
-      },
-      "landscape": {
-        "padding": 16,
-        "max-width": 1280
-      },
-      "desktop": {
-        "padding": 16,
-        "max-width": 1280
-      }
-    },
-    "breakpoints": {
-      "print": 0,
-      "phone": 0,
-      "portrait": 768,
-      "landscape": 1024,
-      "desktop": 1440
-    },
-    "gutter": {
-      "print": {
-        "columns": 12,
-        "column-gap": 16
-      },
-      "phone": {
-        "columns": 12,
-        "column-gap": 16
-      },
-      "portrait": {
-        "columns": 12,
-        "column-gap": 16
-      },
-      "landscape": {
-        "columns": 12,
-        "column-gap": 16
-      },
-      "desktop": {
-        "columns": 12,
-        "column-gap": 16
-      }
-    }
-  }
-}

package/dev/pdf.ts

@@ -1 +0,0 @@
-import '.nswow/pdf.scss'

package/dev/src/components/LanguageSwitch.vue

@@ -1,100 +0,0 @@
-<script setup lang="ts">
-import useConfig from '@/composables/config'
-import { type LocationQuery, useRoute } from 'vue-router'
-import { computed, ref, watch } from 'vue'
-import { ArrayToString } from '@/utils/variables'
-
-type langRoute = {
-  params: {
-    locale: string
-    slug?: string | string[]
-  }
-  query?: LocationQuery
-}
-type langItem = {
-  label: string
-  active: boolean
-  route: langRoute
-}
-
-const config = await useConfig()
-const route = useRoute()
-
-const languageItems = ref<langItem[]>([])
-
-const locale = computed<string>(() => {
-  return ArrayToString(route.params.locale)
-})
-
-const articles = computed<NsWowArticle[]>(() => {
-  return config.value.articles[locale.value] ?? []
-})
-
-async function makeLanguageSwitch() {
-  const languages = []
-  for (let i = 0; i < config.value.settings.languages.length; i++) {
-    const lang = config.value.settings.languages[i]
-    const routeParams = route.params
-    const linkRoute: langRoute = {
-      params: {
-        locale: lang
-      }
-    }
-    if (routeParams.slug) {
-      const slug = ArrayToString(routeParams.slug)
-      const currentArticle = articles.value.find((a) => {
-        return a.slug === slug
-      })
-      if (currentArticle) {
-        const langArticle = config.value.articles[lang].find((a) => {
-          return a.uuid === currentArticle.uuid
-        })
-
-        if (langArticle) {
-          linkRoute.params.slug = langArticle.slug.split('/')
-        }
-      }
-    }
-
-    if (route.query) {
-      linkRoute.query = route.query
-    }
-
-    languages.push({
-      label: lang,
-      active: lang === routeParams.locale,
-      route: linkRoute
-    })
-  }
-  languageItems.value = languages
-}
-
-watch(route, makeLanguageSwitch)
-</script>
-
-<template>
-  <div class="srl-language-switch">
-    <div v-for="link in languageItems" :key="link.label">
-      <router-link class="srl-color-light" :to="link.route" :class="{ active: link.active }">
-        {{ link.label.toUpperCase() }}
-      </router-link>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-@use 'nswow';
-.srl-language-switch {
-  display: flex;
-  justify-content: flex-end;
-  gap: nswow.system-size-unit(5);
-
-  a {
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    outline: none;
-    text-decoration: none;
-  }
-}
-</style>

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

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import { RouterLink } from 'vue-router'
-
-const props = defineProps<{
-  label: string
-  page: string
-  anchor?: string
-}>()
-</script>
-
-<template>
-  <span>
-    <router-link :to="{ path: props.page }">{{ props.label }}</router-link></span
-  >
-</template>

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

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  label: string
-  page?: string
-  anchor?: string
-}>()
-</script>
-
-<template>
-  <span
-    >{{ props.label }}
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      fill="currentColor"
-      class="bi bi-chevron-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>
-  </span>
-</template>

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

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

@@ -1,5 +0,0 @@
-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/PageModal.vue

@@ -1,95 +0,0 @@
-<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/ScrollToTop.vue

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