@simple-reporting/base 1.0.37 → 1.0.38

package/dev/src/components/Page/PrevNext.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { isRouterPath } from '#utils'
 
@@ -21,10 +21,46 @@ const scrollY = ref(window.scrollY)
 window.addEventListener('scroll', () => {
   scrollY.value = window.scrollY
 })
+
+const headerThreshold = ref<number>(500)
+
+function readHeaderHeight() {
+  const raw = getComputedStyle(document.documentElement).getPropertyValue('--srl-header-height')?.trim()
+  if (!raw) {
+    headerThreshold.value = 500
+    return
+  }
+
+  // parse numeric part
+  let value = parseFloat(raw)
+  if (isNaN(value)) {
+    headerThreshold.value = 500
+    return
+  }
+
+  // handle rem unit (e.g. "2rem")
+  if (raw.endsWith('rem')) {
+    const rootFs = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16
+    value = value * rootFs
+  }
+
+  headerThreshold.value = Math.round(value)
+}
+
+onMounted(() => {
+  readHeaderHeight()
+  window.addEventListener('resize', readHeaderHeight)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', readHeaderHeight)
+})
+// --- END NEW ---
+
 function prevNextHelper(item: NsWowNavigationItem, label: string = '', depth: number = 0) {
   if (item.href && isRouterPath(item.href)) {
     const url = item.href
-    const title = label.length > 0 ? `${label}\n${item.label}` : item.label
+    const title = label.length > 0 ? `${item.label}` : item.label
     prevNextNavigation.value.push({ title, url })
   }
 
@@ -66,34 +102,60 @@ const nextItem = computed(() => {
 })
 
 function toTop() {
-  window.scrollTo(0, 0)
-  document.querySelector('#srl-page-main')?.focus()
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+
+  const checkScroll = () => {
+    if (window.scrollY === 0) {
+      const main = document.querySelector('#srl-page-main') as HTMLElement;
+      main?.focus()
+    } else {
+      requestAnimationFrame(checkScroll)
+    }
+  }
+
+  requestAnimationFrame(checkScroll)
 }
 </script>
 <template>
   <div>
     <slot />
-    <div class="srl-prev-next">
-      <div class="srl-prev-next__wrap">
-        <button class="srl-to-top" :hidden="scrollY < 500" type="button" @click="toTop">
-          <img src="@/assets/images/toTop.svg" :alt="$t('toTop')" :title="$t('toTop')" />
-        </button>
-        <router-link
-          v-if="prevItem"
-          class="srl-page-prev"
-          :to="prevItem.url"
-          :title="prevItem.title"
-        >
-          <img src="@/assets/images/prev.svg" :alt="$t('pagePrev')" />
-        </router-link>
-        <router-link
-          v-if="nextItem"
-          class="srl-page-next"
-          :to="nextItem.url"
-          :title="nextItem.title"
-        >
-          <img src="@/assets/images/next.svg" :alt="$t('pageNext')" />
-        </router-link>
+    <div class="srl-grid srl-wide-width srl-to-top">
+      <div class="srl-grid__inner srl-to-top__inner">
+        <ButtonDefault class="srl-to-top__button" :hidden="scrollY < 500" :label="$t('toTop')" icon="arrow-up" :callback="toTop" />
+      </div>
+    </div>
+    <div class="srl-grid srl-wide-width srl-prev-next">
+      <div class="srl-grid__inner srl-prev-next__inner">
+        <div class="srl-prev-next__prev">
+          <router-link
+            v-if="prevItem"
+            class="srl-page-prev__link"
+            :to="prevItem.url"
+            :title="prevItem.title"
+          >
+            <div class="srl-page-prev__icon srl-page-prev__icon--prev srl-button srl-button--icon">
+              <i class="srl-icon-arrow-left" />
+            </div>
+            <div class="srl-page-prev__text">
+              <span class="srl-page-prev__title" v-text="prevItem.title" />
+            </div>
+          </router-link>
+        </div>
+        <div class="srl-prev-next__next">
+          <router-link
+            v-if="nextItem"
+            class="srl-page-prev__link"
+            :to="nextItem.url"
+            :title="nextItem.title"
+          >
+            <div class="srl-page-prev__text">
+              <span class="srl-page-prev__title" v-text="nextItem.title" />
+            </div>
+            <div class="srl-page-prev__icon srl-page-prev__icon--prev srl-button srl-button--icon">
+              <i class="srl-icon-arrow-right" />
+            </div>
+          </router-link>
+        </div>
       </div>
     </div>
   </div>
@@ -102,67 +164,75 @@ function toTop() {
 <style lang="scss">
 @use 'srl';
 
-body:has(.srl-to-top) {
-  .srl-article-root {
-    padding-block-end: srl.system-size-unit(60) !important;
-  }
+.srl-prev-next {
+  @include srl.spacer-margin-top(400);
 }
 
-.srl-prev-next {
-  pointer-events: none;
-  position: sticky;
-  bottom: 0;
-  z-index: 800;
-  max-width: calc(var(--srl-container-max-width) + var(--srl-container-padding) * 2);
-  padding-inline: var(--srl-container-padding);
-  margin-inline: auto;
-  padding-block-end: var(--srl-spacer-medium);
-  height: calc(var(--srl-spacer-L) + srl.system-size-unit(44));
-
-  &__wrap {
-    display: flex;
-    position: relative;
-    justify-content: space-between;
-    width: 100%;
-  }
+.srl-prev-next__inner {
+  display: grid;
+  grid-template-columns: subgrid;
 }
 
 .srl-to-top {
-  pointer-events: auto;
-  width: srl.system-size-unit(44);
-  height: srl.system-size-unit(44);
-  position: absolute;
-  top: srl.system-size-unit(-52);
-  right: 0;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  cursor: pointer;
-  transition: all ease-out 0.3s;
-  opacity: 1;
+  position: sticky;
+  bottom: var(--srl-spacer-400);
+  margin-top: var(--srl-spacer-1600);
+  margin-bottom: var(--srl-spacer-400);
+  display: flex;
+  justify-content: flex-end;
+  z-index: 3;
+  pointer-events: none;
+  @include srl.grid-col(4);
+  @include srl.grid-col(4, phone-ls);
+  @include srl.grid-col(8, tablet-pt);
+  @include srl.grid-col(8, tablet-ls);
+  @include srl.grid-col(12, desktop);
+  @include srl.grid-col(12, desktop-large);
+}
 
+.srl-to-top__button {
+  pointer-events: all;
   &:not([hidden]) {
-    display: block;
+    display: flex;
   }
 
   &[hidden] {
     pointer-events: none;
     opacity: 0;
   }
+}
 
-  img {
-    display: block;
-  }
+.srl-prev-next__prev,
+.srl-prev-next__next {
+  @include srl.grid-col(4);
 }
 
-.srl-page-prev,
-.srl-page-next {
-  pointer-events: auto;
-  width: srl.system-size-unit(44);
-  height: srl.system-size-unit(44);
-  display: block;
-  img {
-    display: block;
+.srl-prev-next__next {
+  @include srl.grid-offset(8, tablet-ls);
+  @include srl.grid-offset(8, desktop);
+  @include srl.grid-offset(8, desktop-large);
+}
+
+.srl-page-prev__link {
+  @extend %srl-button__switch;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  @include srl.spacer-gap(200);
+  @include srl.typography-paragraph();
+  text-decoration: none;
+  color: srl.colors-black-1000();
+  transition: color 0.3s ease;
+  @include srl.spacer-padding-top(400);
+  @include srl.spacer-padding-bottom(400);
+  border-top: 1px solid srl.colors-grey-200();
+
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0s;
   }
 }
+
+.srl-page-prev__text {
+  width: calc(100% - srl.system-size-unit(48) - srl.spacer-get(200));
+}
 </style>

package/dev/src/components/PageFooter.vue

@@ -0,0 +1,405 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useMenu } from '#composables'
+import SvgLogo from '@/assets/images/logo.svg?component'
+
+const { t, te, tm } = useI18n()
+
+type Contact = {
+  label: string
+  key: string
+  title?: string
+  href?: string
+  linkText?: string
+  attributes?: {
+    [key: string]: string
+  }
+}
+
+type SocialLink = {
+  label: string
+  href: string
+  svg: any
+}
+
+const contact = computed<Contact[]>(() => {
+  const c: Contact[] = []
+
+  te('address.company')
+    ? c.push({
+        label: t('address.company'),
+        key: 'company',
+        attributes: {
+          class: 'srl-bold'
+        }
+      })
+    : null
+
+  te('address.location') ? c.push({ label: t('address.location'), key: 'location' }) : null
+
+  te('address.location2') ? c.push({ label: t('address.location2'), key: 'location2' }) : null
+
+  te('address.city') ? c.push({ label: t('address.city'), key: 'city' }) : null
+
+  te('address.country') ? c.push({ label: t('address.country'), key: 'country' }) : null
+
+  if (te('address.phone')) {
+    c.push({
+      label: te('footer.phone') ? t('footer.phone') : '',
+      key: 'phone',
+      title: te('accessibility.callNumber') ? t('accessibility.callNumber') : t('address.phone'),
+      linkText: t('address.phone'),
+      href: `tel:${t('address.phone')}`
+    })
+  }
+
+  if (te('address.fax')) {
+    c.push({
+      label: te('footer.fax') ? t('footer.fax') : '',
+      key: 'fax',
+      title: te('accessibility.callFax') ? t('accessibility.callFax') : t('address.fax'),
+      linkText: t('address.fax'),
+      href: `fax:${t('address.fax')}`
+    })
+  }
+
+  if (te('address.email')) {
+    c.push({
+      label: te('footer.email') ? t('footer.email') : '',
+      key: 'email',
+      title: te('accessibility.sendEmail') ? t('accessibility.sendEmail') : t('address.email'),
+      linkText: t('address.email', { interpolation: { escapeValue: false } }),
+      href: `mailto:${t('address.email', { interpolation: { escapeValue: false } })}`
+    })
+  }
+  return c
+})
+
+const socialLinks = computed<NsWowNavigationItem[]>(() => {
+  const links = []
+
+  if (
+    te('socialMedia.linkedIn') ||
+    te('socialMedia.xing') ||
+    te('socialMedia.twitter') ||
+    te('socialMedia.facebook') ||
+    te('socialMedia.instagram')
+  ) {
+    const socialMedia = tm('socialMedia') as Record<string, string>
+
+    Object.entries(socialMedia).forEach(([key, value]) => {
+      if (key === 'linkedIn') {
+        links.push({
+          label: 'LinkedIn',
+          href: value,
+          icon: 'linkedin-in',
+          attributes: {
+            'aria-label': 'LinkedIn',
+            title: 'LinkedIn',
+            class: 'srl-button srl-button--icon srl-button--transparent-white'
+          }
+        })
+      }
+
+      if (key === 'xing') {
+        links.push({
+          label: 'Xing',
+          href: value,
+          icon: 'xing',
+          attributes: {
+            'aria-label': 'Xing',
+            title: 'Xing',
+            class: 'srl-button srl-button--icon srl-button--transparent-white'
+          }
+        })
+      }
+      if (key === 'twitter') {
+        links.push({
+          label: 'Twitter',
+          href: value,
+          icon: "x-twitter",
+          attributes: {
+            'aria-label': 'Twitter',
+            title: 'Twitter',
+            class: 'srl-button srl-button--icon srl-button--transparent-white'
+          }
+        })
+      }
+      if (key === 'facebook') {
+        links.push({
+          label: 'Facebook',
+          href: value,
+          icon: "facebook-f",
+          attributes: {
+            'aria-label': 'Facebook',
+            title: 'Facebook',
+            class: 'srl-button srl-button--icon srl-button--transparent-white'
+          }
+        })
+      }
+      if (key === 'instagram') {
+        links.push({
+          label: 'Instagram',
+          href: value,
+          icon: "instagram",
+          attributes: {
+            'aria-label': 'Instagram',
+            title: 'Instagram',
+            class: 'srl-button srl-button--icon srl-button--transparent-white'
+          }
+        })
+      }
+    })
+  }
+  return links
+})
+
+const furtherLinks = useMenu('footerFurtherLinks')
+
+const downloads = useMenu('footerDownloads')
+
+const downloadMenu = computed(() => {
+  return downloads.value.map((item) => {
+    if (item.href?.endsWith('.pdf')) {
+      item.attributes = {
+        download: ''
+      }
+    }
+    return item
+  })
+})
+
+const meta = ref([]) //useMenu('footerMeta')
+
+const navigationMeta = computed(() => {
+  return [
+    ...meta.value,
+    {
+      label: t('footer.privacySettings'),
+      callback: () => alert('Privacy settings callback')
+    }
+  ]
+})
+
+const date = new Date()
+const year = ref(date.getFullYear())
+</script>
+
+<template>
+  <footer id="srl-page-footer" class="srl-footer" tabindex="-1">
+    <div class="srl-footer__inner">
+      <div class="srl-footer__head">
+        <p class="srl-footer__logo">
+          <SvgLogo />
+        </p>
+        <div v-if="socialLinks.length && $te('footer.followUs')" class="srl-footer__social">
+          <h2 v-text="$t('footer.followUs')" class="srl-footer__social-header" />
+          <nav class="srl-footer__social-nav" :aria-label="$t('footer.followUs')">
+            <SrlMenu name="socialLinks" :menu="socialLinks" />
+          </nav>
+        </div>
+      </div>
+      <div class="srl-footer__content">
+        <section v-if="contact.length">
+          <h2 v-text="$t('footer.contact')" id="footer-contact" />
+          <address class="srl-footer__address">
+            <template v-for="(cont, index) in contact" :key="cont.label">
+              <span :class="`srl-footer__${cont.key}`" v-bind="cont.attributes ?? {}">
+                <template v-if="cont.href">
+                  {{ cont.label }}<a :href="cont.href" :title="cont.title">{{ cont.linkText }}</a>
+                </template>
+                <template v-else>
+                  {{ cont.label }}
+                </template>
+              </span>
+              <template v-if="index < contact.length - 1">
+                <br />
+              </template>
+            </template>
+          </address>
+        </section>
+        <section v-if="downloads.length">
+          <h2 v-text="$t('footer.downloads')" id="footer-downloads" />
+          <nav aria-labelledby="footer-downloads">
+            <SrlMenu name="downloads" :menu="downloadMenu" class="srl-footer__link-list" />
+          </nav>
+        </section>
+        <section v-if="furtherLinks.length">
+          <h2 v-text="$t('footer.furtherLinks')" id="footer-further-links" />
+          <nav aria-labelledby="footer-further-links">
+            <SrlMenu name="furtherLinks" :menu="furtherLinks" class="srl-footer__link-list" />
+          </nav>
+        </section>
+      </div>
+      <div class="srl-footer__meta">
+        <nav v-if="navigationMeta.length" aria-label="Meta">
+          <SrlMenu name="meta" :menu="navigationMeta" />
+        </nav>
+        <p v-if="$te('footer.copyright')" v-text="$t('footer.copyright', { year: year })" />
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style scoped lang="scss">
+@use 'srl';
+
+footer {
+  background-color: srl.colors-grey-800();
+
+  color: srl.colors-white-1000();
+
+  :deep(a:not(.srl-button)),
+  :deep(button:not(.srl-button)) {
+    @include srl.typography-paragraph();
+    margin: unset;
+    padding: unset;
+    background-color: transparent;
+    border: none;
+    text-decoration: none;
+    cursor: pointer;
+    color: srl.colors-white-1000();
+  }
+
+  section {
+    display: flex;
+    flex-direction: column;
+    @include srl.spacer-row-gap(400);
+    width: 100%;
+  }
+
+  :deep(.srl-footer__link-list) {
+    display: flex;
+    flex-direction: column;
+    row-gap: srl.system-size-unit(10);
+  }
+
+  h2 {
+    @include srl.typography-title-h3();
+  }
+}
+
+.srl-footer {
+  &__inner {
+    @include srl.typography-paragraph();
+    margin: 0 auto;
+    max-width: var(--srl-container-max-width);
+    padding-inline: var(--srl-container-padding);
+    @include srl.spacer-padding-top(800);
+    @include srl.spacer-padding-bottom(800);
+    display: flex;
+    flex-direction: column;
+    @include srl.spacer-row-gap(800);
+  }
+
+  &__head {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__logo {
+    width: srl.system-size-unit(175);
+  }
+
+  &__social {
+    display: flex;
+    @include srl.spacer-gap(100);
+    justify-content: center;
+    align-items: center;
+
+    &-header {
+      @include srl.typography-paragraph();
+    }
+
+    &-nav {
+      .srl-menu {
+        display: flex;
+        align-items: center;
+        @include srl.spacer-gap(100);
+      }
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-wrap: wrap;
+    @include srl.spacer-column-gap(400);
+    @include srl.spacer-row-gap(400);
+    width: 100%;
+  }
+
+  &__address {
+    font-style: normal;
+  }
+
+  &__meta {
+    display: flex;
+    @include srl.spacer-row-gap(400);
+    flex-direction: column;
+
+    :deep(a:not(.srl-button)),
+    :deep(button:not(.srl-button)) {
+      text-decoration: underline;
+    }
+
+    :deep(ul) {
+      display: flex;
+      align-items: baseline;
+      gap: srl.spacer-get(400);
+
+      @include srl.grid-media-up(tablet-pt) {
+        @include srl.spacer-column-gap(400);
+        flex-direction: row;
+      }
+    }
+
+    :deep(a:not(.srl-button)),
+    :deep(button:not(.srl-button)),
+    :deep(p) {
+      @include srl.typography-link();
+    }
+  }
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+@include srl.grid-media(print) {
+  footer {
+    display: none;
+  }
+}
+
+@include srl.grid-media-up(tablet-pt) {
+  footer {
+    section {
+      width: srl.system-size-unit(300);
+    }
+  }
+
+  .srl-footer {
+    &__head {
+      flex-direction: row;
+      justify-content: space-between;
+      width: 100%;
+    }
+  }
+}
+
+@include srl.grid-media-up(tablet-ls) {
+  .srl-footer {
+    &__meta {
+      width: 100%;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: baseline;
+    }
+  }
+}
+</style>