@simple-reporting/base 0.1.112 → 1.0.1

package/srl/components/Srl/Aria/TabChain.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+/**
+ * `SrlAriaTabChain.vue`
+ *
+ * This Vue 3 component implements a closed tab navigation chain.
+ * It monitors focusable elements within the container and ensures that
+ * tab navigation works as a closed cycle: tabbing on the last element returns
+ * to the first element, and shift+tab on the first element jumps to the last.
+ *
+ * ## Reactive Variables
+ * - `availableTabs`: Array of all focusable elements in the container
+ * - `rootElement`: Reference to the root <div> element of the component
+ * - `firstElement`: Reference to the first focusable element
+ * - `lastElement`: Reference to the last focusable element
+ *
+ * ## Methods
+ * - `registerTabs()`: Finds all focusable elements in the container and stores references
+ * - `next(event)`: Handler for Tab key, jumps from last to first element
+ * - `prev(event)`: Handler for Shift+Tab key, jumps from first to last element
+ *
+ * ## Lifecycle Hooks
+ * - On mounting and after updates, `registerTabs()` is called to capture focusable elements
+ *
+ * ## Event Handlers
+ * - `@keydown.tab.stop`: Intercepts Tab key and calls `next()`
+ * - `@keydown.shift.tab.stop.prevent`: Intercepts Shift+Tab and calls `prev()`
+ *
+ * ## Usage Example
+ * ```vue
+ * <SrlAriaTabChain>
+ *   <button>First Button</button>
+ *   <input type="text" />
+ *   <button>Last Button</button>
+ * </SrlAriaTabChain>
+ */
+import { ref, nextTick, onMounted, onUpdated } from 'vue';
+
+const availableTabs = ref<Array<HTMLElement>>([]);
+const rootElement = ref<HTMLDivElement>();
+const firstElement = ref<HTMLElement>();
+const lastElement = ref<HTMLElement>();
+
+function registerTabs(): void {
+  availableTabs.value = Array.from(
+    rootElement.value.querySelectorAll<HTMLElement>(
+      'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])',
+    ),
+  );
+  firstElement.value = availableTabs.value[0];
+  lastElement.value = availableTabs.value.at(-1);
+}
+
+onMounted(() => {
+  nextTick(registerTabs);
+});
+
+onUpdated(() => {
+  nextTick(registerTabs);
+});
+
+function next(event) {
+  if (availableTabs.value.length === 0) {
+    return;
+  }
+
+  const focusedElement = document.activeElement as HTMLElement;
+
+  if (focusedElement === lastElement.value) {
+    event.preventDefault();
+    firstElement.value.focus();
+  }
+}
+
+function prev(event) {
+  if (availableTabs.value.length === 0) {
+    return;
+  }
+
+  const currentIndex = availableTabs.value.indexOf(event.target);
+
+  if (currentIndex === -1) {
+    firstElement.value.focus();
+  } else if (currentIndex === 0) {
+    lastElement.value.focus();
+  } else {
+    availableTabs.value[currentIndex - 1].focus();
+  }
+}
+</script>
+
+<template>
+  <div
+    ref="rootElement"
+    tabindex="-1"
+    @keydown.tab.stop="next"
+    @keydown.shift.tab.stop.prevent="prev"
+  >
+    <slot />
+  </div>
+</template>

package/srl/components/Srl/Article/Autoload.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+/**
+ * `Autoload.vue`
+ *
+ * This Vue 3 component automatically initializes the `Autoload` functionality
+ * on the root element when the component is mounted.
+ *
+ * ## Imports
+ * - `Autoload`: A module imported from `@/Autoload.ts` that provides the `init` method.
+ * - `onMounted`: A Vue lifecycle hook used to execute logic after the component is mounted.
+ * - `ref`: A Vue function to create a reactive reference for the root element.
+ *
+ * ## Refs
+ * - `rootElement`: A reactive reference to the root `<div>` element of the component.
+ *
+ * ## Lifecycle Hooks
+ * - `onMounted`: Invokes the `Autoload.init` method with the `rootElement` when the component is mounted.
+ *
+ * ## Template
+ * Renders a `<div>` element with a `ref` attribute set to `rootElement`. The component uses a `slot` to allow custom content to be passed into the `<div>`.
+ *
+ * ## Usage Example
+ * ```vue
+ * <SrlArticleAutoload>
+ *   <p>Content to be autoloaded</p>
+ * </SrlArticleAutoload>
+ */
+import Autoload from '@/Autoload.ts';
+import { onMounted, ref } from 'vue';
+const rootElement = ref<HTMLDivElement>();
+
+onMounted(() => {
+  !rootElement.value || Autoload.init(rootElement.value);
+});
+</script>
+
+<template>
+  <div ref="rootElement">
+    <slot />
+  </div>
+</template>

package/srl/components/Srl/Article/DialogButton.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ref, useId } from 'vue';
+import { useArticles, useConfig } from '#composables';
+import { prepareHtmlContent } from '#utils';
+
+const props = defineProps<{
+  uuid: string;
+}>();
+
+const config = useConfig();
+const articles = useArticles();
+const id = ref<string>(`srl-page__dialog-${useId()}`);
+const content = ref<string>('');
+const dialog = ref<typeof SrlPageDialog | null>(null);
+async function loadContent() {
+  const article = articles.value.find((article) => article.uuid === props.uuid);
+  if (article) {
+    const file = `./html/${config.value.locale}/${article.name}.html`;
+    try {
+      const req = await fetch(file);
+      const text = await req.text();
+      content.value = prepareHtmlContent(text);
+    } catch (error) {
+      console.error(`Failed to load article content from ${file}:`, error);
+    }
+  }
+}
+
+loadContent();
+async function open() {
+  dialog.value.open();
+}
+</script>
+
+<template>
+  <button
+    class="srl-dialog-button"
+    type="button"
+    :aria-controls="id"
+    aria-haspopup="dialog"
+    :aria-expanded="dialog?.dialogState ?? false"
+    @click="open"
+  >
+    <slot />
+    <Teleport to="body">
+      <SrlPageDialog
+        v-if="content"
+        :id="id"
+        ref="dialog"
+        :content="content"
+        @close="expanded = false"
+      />
+    </Teleport>
+  </button>
+</template>

package/srl/components/Srl/Article/Root.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+/**
+ * `Root.vue`
+ *
+ * This Vue 3 component serves as the main container for rendering dynamic article content.
+ * It uses VRuntimeTemplate to render HTML content from pageData and initializes automatic
+ * loading functionality after content changes.
+ *
+ * ## Imports
+ * - `nextTick`, `ref`, `watch`: Vue core functionality
+ * - `VRuntimeTemplate`: Library for rendering dynamic templates at runtime
+ * - `usePageData`: Composable that provides access to the current page data
+ * - `Autoload`: Utility for initializing dynamic content
+ *
+ * ## Reactive Variables
+ * - `pageData`: Data from the usePageData composable containing article content
+ * - `articleRoot`: Reference to the root article element
+ *
+ * ## Watchers
+ * - Watches for changes in `pageData` and runs Autoload.init on the article root element
+ *   after the DOM has updated
+ *
+ * ## Template
+ * - Renders an article element with the class "srl-article-root"
+ * - Uses VRuntimeTemplate to dynamically render the HTML content from pageData.content
+ *
+ * ## Usage
+ * This component is typically used as part of a page layout system to display
+ * the main content of articles that may contain dynamic elements requiring initialization.
+ */
+import { nextTick, ref, onMounted } from 'vue';
+import VRuntimeTemplate from 'vue3-runtime-template';
+import Autoload from '@/Autoload.ts';
+import { useRoute } from 'vue-router';
+import { useArticle, useArticles, useConfig, useRoot } from '#composables';
+import { prepareHtmlContent } from '#utils';
+
+const articleRoot = ref<HTMLDivElement | null>(null);
+const config = useConfig();
+const route = useRoute();
+const articles = useArticles();
+const content = ref<string>('');
+const locale = route.params.locale as string;
+const article = useArticle();
+
+if (article.value) {
+  const file = `./html/${locale}/${article.value.name}.html`;
+  try {
+    const req = await fetch(file);
+    let text = await req.text();
+
+    document.title = article.value.translatedTitle;
+    content.value = prepareHtmlContent(text);
+  } catch (error) {
+    console.error(`Failed to load article content from ${file}:`, error);
+  }
+}
+
+onMounted(() => {
+  nextTick(() => {
+    Autoload.init(articleRoot.value);
+    if (route.hash) {
+      const target = document.querySelector(route.hash);
+      if (target) {
+        target.scrollIntoView({ behavior: 'instant', block: 'start' });
+      }
+    }
+  });
+});
+</script>
+
+<template>
+  <article ref="articleRoot" class="srl-article-root">
+    <VRuntimeTemplate :template="content" />
+  </article>
+</template>

package/srl/components/Srl/Menu/Item/Content/Image.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const props = defineProps<{
+  item: NsWowNavigationItem;
+}>();
+</script>
+
+<template>
+  <img
+    :src="props.item.img.src"
+    :alt="props.item.img.alt ?? props.item.label"
+  />
+</template>

package/srl/components/Srl/Menu/Item/Content/ImageAfter.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const props = defineProps<{
+  item: NsWowNavigationItem;
+}>();
+</script>
+
+<template>
+  <span>{{ props.item.label }}</span>
+  <img
+    :src="props.item.imgAfter.src"
+    :alt="props.item.imgAfter.alt ?? props.item.label"
+  />
+</template>

package/srl/components/Srl/Menu/Item/Content/ImageBefore.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const props = defineProps<{
+  item: NsWowNavigationItem;
+}>();
+</script>
+
+<template>
+  <img
+    :src="props.item.imgBefore.src"
+    :alt="props.item.imgBefore.alt ?? props.item.label"
+  />
+  <span>{{ props.item.label }}</span>
+</template>

package/srl/components/Srl/Menu/Item/Content/Text.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const pops = defineProps<{
+  item: NsWowNavigationItem;
+}>();
+</script>
+
+<template>
+  {{ pops.item.label }}
+</template>

package/srl/components/Srl/Menu/Item/Content.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import MenuItemContentText from './Content/Text.vue';
+import MenuItemContentImage from './Content/Image.vue';
+import MenuItemContentImageBefore from './Content/ImageBefore.vue';
+import MenuItemContentImageAfter from './Content/ImageAfter.vue';
+
+const props = defineProps<{
+  item: NsWowNavigationItem;
+}>();
+</script>
+
+<template>
+  <MenuItemContentImage v-if="props.item.img" :item="props.item" />
+  <MenuItemContentImageBefore
+    v-else-if="props.item.imgBefore"
+    :item="props.item"
+  />
+  <MenuItemContentImageAfter
+    v-else-if="props.item.imgAfter"
+    :item="props.item"
+  />
+  <MenuItemContentText v-else :item="props.item" />
+</template>

package/srl/components/Srl/Menu/Item.vue

@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, useId } from 'vue';
+import MenuItemContent from './Item/Content.vue';
+import MenuList from './List.vue';
+import type { RouterLink } from 'vue-router';
+import { isExternalPath } from '#utils/uri';
+
+const props = defineProps<{
+  name: string;
+  item: NsWowNavigationItem;
+  index: number | string;
+  disableTab: boolean;
+  disableTabIndex: boolean;
+  initOpen: number;
+  depth: number;
+}>();
+
+const emit = defineEmits([
+  'open',
+  'close',
+  'link',
+  'routerChange',
+  'next',
+  'prev',
+  'tab',
+  'back',
+]);
+const id = ref<number | string | undefined>();
+if (props.item.children) {
+  id.value = useId();
+}
+
+const external = ref(props.item.href && isExternalPath(props.item.href));
+
+const menu = ref();
+const $el = ref<HTMLButtonElement | HTMLAnchorElement | typeof RouterLink>();
+const opened = ref(false);
+
+function toggle() {
+  opened.value = !opened.value;
+  if (opened.value) {
+    emit('open', { index: props.index });
+    nextTick(() => {
+      const item = menu.value?.items[0].$el;
+      item.$el ? item.$el.focus() : item.focus();
+    });
+  }
+}
+
+function close() {
+  emit('close', { index: props.index });
+}
+
+function closeSub() {
+  $el.value?.focus();
+}
+
+function next() {
+  emit('next', { index: props.index });
+}
+
+function prev() {
+  emit('prev', { index: props.index });
+}
+
+function tab(event: KeyboardEvent) {
+  if (props.disableTab && event) {
+    event.stopPropagation();
+    event.preventDefault();
+    opened.value = false;
+  }
+  emit('tab');
+}
+
+function back(event: KeyboardEvent) {
+  if (props.disableTab && event) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+  emit('back');
+}
+
+function link() {
+  !props.item.callback || props.item.callback();
+  emit('link');
+}
+
+function routerChange() {
+  !props.item.callback || props.item.callback();
+  emit('link');
+  emit('routerChange');
+}
+
+function closeItem() {
+  opened.value = false;
+  menu.value?.closeAll();
+}
+
+defineExpose({
+  closeItem,
+  $el,
+  menu,
+});
+
+const dynamicAttributes = computed(() => {
+  return props.item.attributes ?? {};
+});
+</script>
+
+<template>
+  <li v-if="!item.children && props.item.href">
+    <router-link
+      v-if="!external"
+      ref="$el"
+      :tabindex="props.index === 0 && !props.disableTabIndex ? 0 : -1"
+      :to="props.item.href"
+      :class="{ active: item.active }"
+      :title="props.item.title ?? props.item.label"
+      v-bind="dynamicAttributes"
+      @click="routerChange"
+      @keydown.left.stop.prevent="prev"
+      @keydown.up.stop.prevent="prev"
+      @keydown.down.stop.prevent="next"
+      @keydown.right.stop.prevent="next"
+      @keydown.tab.exact="tab"
+      @keydown.shift.tab.exact="back"
+      @keydown.esc.stop.prevent="close"
+      @keydown.enter="link"
+    >
+      <MenuItemContent :item="props.item" />
+    </router-link>
+    <a
+      v-else
+      :tabindex="props.index === 0 && !props.disableTabIndex ? 0 : -1"
+      ref="$el"
+      :href="props.item.href"
+      :title="props.item.title ?? props.item.label"
+      :target="props.item.href?.startsWith('http') ? '_blank' : undefined"
+      v-bind="dynamicAttributes"
+      @click="link"
+      @keydown.left.stop.prevent="prev"
+      @keydown.up.stop.prevent="prev"
+      @keydown.down.stop.prevent="next"
+      @keydown.right.stop.prevent="next"
+      @keydown.tab.exact="tab"
+      @keydown.shift.tab.exact="back"
+      @keydown.esc.stop.prevent="close"
+    >
+      <MenuItemContent :item="props.item" />
+    </a>
+  </li>
+  <li v-else-if="props.item.callback">
+    <button
+      type="button"
+      ref="$el"
+      :tabindex="props.index === 0 && !props.disableTabIndex ? 0 : -1"
+      :title="props.item.title ?? props.item.label"
+      v-bind="dynamicAttributes"
+      @click="props.item.callback"
+      @keydown.left.stop.prevent="prev"
+      @keydown.up.stop.prevent="prev"
+      @keydown.down.stop.prevent="next"
+      @keydown.right.stop.prevent="next"
+      @keydown.tab.exact="tab"
+      @keydown.shift.tab.exact="back"
+      @keydown.esc.stop.prevent="close"
+    >
+      <MenuItemContent :item="props.item" />
+    </button>
+  </li>
+  <li v-else>
+    <button
+      type="button"
+      ref="$el"
+      :tabindex="props.index === 0 ? 0 : -1"
+      :aria-haspopup="props.item.children ? 'true' : 'false'"
+      :aria-expanded="opened"
+      :aria-controls="`${props.name}-${id}`"
+      :title="props.item.title ?? props.item.label"
+      v-bind="dynamicAttributes"
+      @click="toggle"
+      @keydown.left.stop.prevent="prev"
+      @keydown.up.stop.prevent="prev"
+      @keydown.down.stop.prevent="next"
+      @keydown.right.stop.prevent="next"
+      @keydown.tab.exact="tab"
+      @keydown.shift.tab.exact="back"
+      @keydown.esc.stop.prevent="close"
+    >
+      <MenuItemContent :item="props.item" />
+    </button>
+    <MenuList
+      v-if="props.item.children"
+      ref="menu"
+      :id="`${props.name}-${id}`"
+      :name="props.name"
+      :menu="props.item.children"
+      :disableTab="props.disableTab"
+      :initOpen="props.initOpen"
+      :depth="props.depth + 1"
+      v-model:opened="opened"
+      @link="link"
+      @routerChange="emit('routerChange')"
+      @tab="tab"
+      @closeSub="closeSub"
+    />
+  </li>
+</template>