@simple-reporting/base 1.0.36 → 1.0.38

package/dev/src/components/Button/Default/ExternalLink.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed, ref, type VNode } from 'vue'
+
+const props = defineProps<{
+  label: string;
+  title?: string;
+  href?: string;
+  callback?: () => void;
+  img?: {
+    src: string
+    alt?: string
+  }
+  imgBefore?: {
+    src: string
+    alt?: string
+  }
+  imgAfter?: {
+    src: string
+    alt?: string
+  }
+  icon?: string
+  iconBefore?: string
+  iconAfter?: string
+  svg?: VNode | string;
+  svgBefore?: VNode | string;
+  svgAfter?: VNode | string;
+}>();
+
+const classes = computed(() => {
+  return {
+    'srl-button': true,
+    'srl-button--icon': props.icon || props.img || props.svg,
+    'srl-has-icon': props.iconBefore || props.iconAfter || props.imgBefore || props.imgAfter || props.svgBefore || props.svgAfter,
+  }
+})
+
+const $el = ref<HTMLAnchorElement>()
+defineExpose({
+  $el
+})
+</script>
+
+<template>
+  <a
+    ref="$el"
+    :href="href"
+    :title="props.title"
+    :aria-label="props.icon ? props.label : undefined"
+    :class="classes">
+    <ButtonDefaultContent
+      :label="props.label"
+      :img="props.img"
+      :imgBefore="props.imgBefore"
+      :imgAfter="props.imgAfter"
+      :icon="props.icon"
+      :iconBefore="props.iconBefore"
+      :iconAfter="props.iconAfter"
+      :svg="props.svg"
+      :svgBefore="props.svgBefore"
+      :svgAfter="props.svgAfter"
+    />
+  </a>
+</template>

package/dev/src/components/Button/Default/InternalLink.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed, ref, type VNode } from 'vue'
+
+const props = defineProps<{
+  label: string;
+  title?: string;
+  href: string;
+  callback?: () => void;
+  img?: {
+    src: string
+    alt?: string
+  }
+  imgBefore?: {
+    src: string
+    alt?: string
+  }
+  imgAfter?: {
+    src: string
+    alt?: string
+  }
+  icon?: string
+  iconBefore?: string
+  iconAfter?: string
+  svg?: VNode | string;
+  svgBefore?: VNode | string;
+  svgAfter?: VNode | string;
+}>();
+
+const classes = computed(() => {
+  return {
+    'srl-button': true,
+    'srl-button--icon': props.icon || props.img || props.svg,
+    'srl-has-icon': props.iconBefore || props.iconAfter || props.imgBefore || props.imgAfter || props.svgBefore || props.svgAfter,
+  }
+})
+
+const $el = ref<HTMLAnchorElement>()
+defineExpose({
+  $el
+})
+</script>
+
+<template>
+  <router-link
+    ref="$el"
+    :to="props.href"
+    :title="props.title"
+    :aria-label="props.icon ? props.label : undefined"
+    :class="classes"
+  >
+    <ButtonDefaultContent
+      :label ="props.label"
+      :img="props.img"
+      :imgBefore="props.imgBefore"
+      :imgAfter="props.imgAfter"
+      :icon="props.icon"
+      :iconBefore="props.iconBefore"
+      :iconAfter="props.iconAfter"
+      :svg="props.svg"
+      :svgBefore="props.svgBefore"
+      :svgAfter="props.svgAfter"
+    />
+  </router-link>
+</template>

package/dev/src/components/Button/Default.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { isRouterPath } from '#utils'
+import { computed, onMounted, ref, type VNode } from 'vue'
+
+const props = withDefaults(defineProps<{
+  label: string;
+  title?: string;
+  href?: string;
+  type?: 'button' | 'link' | 'submit';
+  callback?: () => void;
+  img?: {
+    src: string
+    alt?: string
+  }
+  imgBefore?: {
+    src: string
+    alt?: string
+  }
+  imgAfter?: {
+    src: string
+    alt?: string
+  }
+  icon?: string
+  iconBefore?: string
+  iconAfter?: string
+  svg?: VNode | string;
+  svgBefore?: VNode | string;
+  svgAfter?: VNode | string;
+}>(), {
+  type: 'button',
+  callback: () => {},
+})
+
+const title = computed(() => props.title || props.label || undefined )
+
+const child = ref<ButtonDefaultInternalLink | ButtonDefaultExternalLink | ButtonDefaultAction>()
+
+const $el = ref<HTMLAnchorElement | HTMLButtonElement>()
+
+onMounted(() => {
+  if (child.value && child.value.$el) {
+    $el.value = child.value.$el
+  }
+})
+
+defineExpose({
+  $el
+})
+</script>
+
+<template>
+  <ButtonDefaultInternalLink
+    v-if="props.href && isRouterPath(props.href)"
+    ref="child"
+    :title="title"
+    :label="props.label"
+    :href="props.href"
+    :img="props.img"
+    :imgBefore="props.imgBefore"
+    :imgAfter="props.imgAfter"
+    :icon="props.icon"
+    :iconBefore="props.iconBefore"
+    :iconAfter="props.iconAfter"
+    :svg="props.svg"
+    :svgBefore="props.svgBefore"
+    :svgAfter="props.svgAfter"
+  />
+  <ButtonDefaultExternalLink
+    v-else-if="props.href"
+    ref="child"
+    :title="title"
+    :label="props.label"
+    :href="href"
+    :img="props.img"
+    :imgBefore="props.imgBefore"
+    :imgAfter="props.imgAfter"
+    :icon="props.icon"
+    :iconBefore="props.iconBefore"
+    :iconAfter="props.iconAfter"
+    :svg="props.svg"
+    :svgBefore="props.svgBefore"
+    :svgAfter="props.svgAfter"
+  />
+  <ButtonDefaultAction
+    v-else-if="props.callback"
+    ref="child"
+    :title="title"
+    :label="props.label"
+    :type="props.type"
+    :callback="props.callback"
+    :img="props.img"
+    :imgBefore="props.imgBefore"
+    :imgAfter="props.imgAfter"
+    :icon="props.icon"
+    :iconBefore="props.iconBefore"
+    :iconAfter="props.iconAfter"
+    :svg="props.svg"
+    :svgBefore="props.svgBefore"
+    :svgAfter="props.svgAfter"
+  />
+</template>

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

@@ -1,15 +1,105 @@
 <script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { isDesktopView } from '@/composables/isDesktopView.ts'
+import SvgNavArrowRight from '@/assets/images/nav-arrow-right.svg?raw'
+import SvgNavArrowLeft from '@/assets/images/nav-arrow-left.svg?component'
+
 const props = defineProps<{
   mainNavigation: NsWowNavigationItem[]
 }>()
+
+const emit = defineEmits([
+  'toggle',
+  'routerChange',
+  'focusMain',
+])
+
+function toggle(data) {
+  emit('toggle', data)
+}
+
+function routerChange() {
+  emit('routerChange')
+}
+
+function focusMain() {
+  emit('focusMain')
+}
+
+function addArrowRightIcon(item: NsWowNavigationItem) {
+  if (item.children && item.children.length > 0) {
+    item.svgAfter = SvgNavArrowRight as string
+    item.children.forEach((subItem) => {
+      addArrowRightIcon(subItem)
+    })
+  }
+  return item
+}
+
+const navigation = computed<NsWowNavigationItem[]>(() => {
+  const nav = []
+  props.mainNavigation.forEach((item) => {
+    const newItem = { ...item }
+    if (isDesktopView.value) {
+      newItem.children?.forEach((subItem) => {
+        addArrowRightIcon(subItem)
+      })
+    } else {
+      addArrowRightIcon(newItem)
+    }
+    nav.push(newItem)
+  })
+
+  return nav
+})
+
+const menu = ref<SrlMenu>()
+
+function close() {
+  focusMain()
+}
+
+function tab(e: KeyboardEvent) {
+  if (isDesktopView.value) {
+    close()
+  } else {
+    e.preventDefault()
+    menu.value.closeAll()
+    const elem = document.querySelector<HTMLElement>('#srl-meta-navigation > ul')
+    elem?.focus()
+  }
+}
+
+defineExpose({
+  menu,
+})
 </script>
 
 <template>
-  <nav id="srl-page-navigation" class="srl-navigation" tabindex="-1">
-    <SrlMenu name="main-navigation" :menu="props.mainNavigation" class="srl-main-navigation" />
+  <nav
+    id="srl-page-navigation"
+    class="srl-main-navigation"
+    tabindex="-1"
+  >
+    <SrlMenu
+      ref="menu"
+      name="main-navigation"
+      :menu="navigation"
+      class="srl-main-navigation-menu"
+      :backPath="[{
+        label: 'Main Menu'
+      }]"
+      :backButtonLabel="function(backPath) {
+        return $t('page.navigation.back', {label: backPath[0].label})
+      }"
+      @routerChange="routerChange"
+      @close="close()"
+      @keydown.tab.stop="tab"
+      :backButtonEnabled="!isDesktopView"
+      :backButtonItem="{
+        svgBefore: SvgNavArrowLeft as string,
+      }"
+      @toggle="toggle"
+    />
   </nav>
 </template>
-
-<style lang="scss">
-@use 'srl';
-</style>

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

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { useConfig, useLanguageSwitch } from '#composables'
+import { useGlobalLinks } from '@/composables/globalLinks.ts'
+import { isDesktopView } from '@/composables/isDesktopView.ts'
+import { computed, ref } from 'vue'
+
+import SvgDownload from 'assets/images/download.svg?component'
+import SvgSearch from 'assets/images/search.svg?component'
+import SvgChevronDown from 'assets/images/chevron-down.svg?component'
+
+const config = useConfig()
+const globalLinks = useGlobalLinks()
+const languages = useLanguageSwitch()
+
+const emit = defineEmits([
+  'toggle',
+  'routerChange',
+  'focusMain',
+])
+
+function toggle(data) {
+  emit('toggle', data)
+}
+
+function routerChange() {
+  emit('routerChange')
+}
+
+function focusMain() {
+  emit('focusMain')
+}
+
+const menu = ref<SrlMenu>()
+
+const metaNav = computed<NsWowNavigationItem[]>(() => {
+  const nav = [];
+  if (config.value.settings.languages.length > 1) {
+    nav.push({
+      label: languages.value.current.label.toUpperCase(),
+      iconAfter: 'chevron-down',
+      children: languages.value.items.map((i) => {
+        return {
+          label: i.label.toUpperCase(),
+          href: i.href,
+        }
+      }),
+      attributes: {
+        class: 'srl-button'
+      }
+    })
+  }
+
+  if (globalLinks.value.downloads) {
+    nav.push({
+      label: 'Downloads',
+      href: globalLinks.value.downloads.href,
+      //svg: SvgDownload,
+      icon: 'download',
+      attributes: {
+        class: 'srl-button srl-button--icon'
+      }
+    })
+  }
+
+  if (globalLinks.value.search) {
+    nav.push({
+      label:globalLinks.value.search.label,
+      href: globalLinks.value.search.href,
+      //svg: SvgSearch,
+      icon: 'search',
+      attributes: {
+        class: 'srl-button srl-button--icon'
+      }
+    })
+  }
+
+  return nav;
+})
+
+function close() {
+  focusMain()
+}
+
+function tab(e: KeyboardEvent) {
+  if (isDesktopView.value) {
+    close()
+  } else {
+    e.preventDefault()
+    const elem = document.querySelector<HTMLElement>('#srl-page-navigation > ul')
+    elem?.focus()
+  }
+}
+
+defineExpose({
+  menu,
+})
+</script>
+
+<template>
+  <nav
+    id="srl-meta-navigation"
+    class="srl-meta-navigation"
+    tabindex="-1"
+  >
+    <SrlMenu
+      ref="menu"
+      name="meta-navigation"
+      :menu="metaNav"
+      class="srl-meta-navigation__menu"
+      @toggle="toggle"
+      @routerChange="routerChange"
+      @close="close"
+      @keydown.tab="tab"
+    />
+  </nav>
+</template>