@simple-reporting/base 0.1.111 → 1.0.0

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>

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

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+/**
+ * `SrlMenu.vue`
+ *
+ * This Vue 3 component implements a hierarchical menu system with various navigation capabilities.
+ * It manages a list of menu items with support for opening/closing items, keyboard navigation,
+ * and parent-child menu relationships.
+ *
+ * ## Props
+ * - `name`: String - Identifier for the menu
+ * - `menu`: Array<NsWowNavigationItem> - Menu items data structure
+ * - `disableTab`: Boolean - Disables tab navigation when true (default: false)
+ * - `disableTabIndex`: Boolean - Disables tabindex attributes when true (default: false)
+ * - `initOpen`: Number - Initial depth level that should be open (default: 0)
+ * - `singleOpen`: Boolean - Only allows one menu item to be open at a time (default: true)
+ * - `depth`: Number - Current depth level of this menu (default: 0)
+ *
+ * ## Emits
+ * - `close`: When the menu is closed
+ * - `closeSub`: When a submenu is closed
+ * - `link`: When a link item is activated
+ * - `routerChange`: When navigation occurs via router
+ * - `nextExceeded`, `prevExceeded`: When navigation exceeds boundaries
+ * - `tab`: When tab navigation occurs
+ * - `back`: When back navigation is triggered
+ *
+ * ## Reactive Variables
+ * - `items`: Reference array to MenuItem components
+ * - `opened`: v-model for the open/closed state of the menu
+ * - `$el`: Reference to the root <ul> element
+ *
+ * ## Methods
+ * - `open(event)`: Opens a menu item, closing others if singleOpen is true
+ * - `close()`: Closes the current menu or emits close events based on depth
+ * - `next(event)`: Focuses the next menu item with circular navigation
+ * - `prev(event)`: Focuses the previous menu item with circular navigation
+ * - `closeAll(keep?)`: Closes all menu items except the one specified by index
+ *
+ * ## Exposed API
+ * - `closeAll`: Method to close all menu items except one (optional)
+ * - `$el`: Reference to the root element
+ * - `items`: Array of menu item components
+ *
+ * ## Usage Example
+ * ```vue
+ * <SrlMenuList
+ *   name="main-nav"
+ *   :menu="navigationItems"
+ *   :singleOpen="true"
+ *   @link="handleNavigation"
+ * />
+ */
+import { ref } from 'vue';
+import MenuItem from './Item.vue';
+
+const props = withDefaults(
+  defineProps<{
+    name: string;
+    menu: NsWowNavigationItem[];
+    disableTab?: boolean;
+    disableTabIndex?: boolean;
+    initOpen?: number;
+    singleOpen?: boolean;
+    depth?: number;
+  }>(),
+  {
+    disableTab: false,
+    disableTabIndex: false,
+    initOpen: 0,
+    singleOpen: true,
+    depth: 0,
+  },
+);
+
+const emit = defineEmits([
+  'close',
+  'closeSub',
+  'link',
+  'routerChange',
+  'nextExceeded',
+  'prevExceeded',
+  'tab',
+  'back',
+]);
+const items = ref<Array<typeof MenuItem>>([]);
+
+const opened = defineModel('opened', { type: Boolean, default: true });
+
+function open(event: { index: number }) {
+  if (props.singleOpen) {
+    closeAll(event.index);
+  }
+}
+
+function close() {
+  if (props.initOpen < props.depth) {
+    opened.value = false;
+    emit('closeSub');
+  } else {
+    emit('close');
+  }
+}
+
+function next(event: { index: number }) {
+  let newIndex = event.index + 1;
+  let exceeded = false;
+  if (newIndex >= items.value.length) {
+    exceeded = true;
+    newIndex = 0;
+  }
+  const item = items.value[newIndex].$el;
+  item.$el ? item.$el.focus() : item.focus();
+  !exceeded || emit('nextExceeded');
+}
+
+function prev(event: { index: number }) {
+  let newIndex = event.index - 1;
+  let exceeded = false;
+  if (newIndex < 0) {
+    exceeded = true;
+    newIndex = items.value.length - 1;
+  }
+  const item = items.value[newIndex].$el;
+  item.$el ? item.$el.focus() : item.focus();
+  !exceeded || emit('prevExceeded');
+}
+
+function tab() {
+  emit('tab');
+}
+
+function back() {
+  emit('back');
+}
+
+function link() {
+  emit('link');
+}
+
+function routerChange() {
+  emit('routerChange');
+}
+
+function closeAll(keep?: number | string) {
+  items.value.forEach((item: typeof MenuItem, index: number) => {
+    if (keep !== index) item.closeItem();
+  });
+}
+
+const $el = ref<HTMLUListElement>();
+
+defineExpose({
+  closeAll,
+  $el,
+  items,
+});
+</script>
+
+<template>
+  <ul ref="$el" :hidden="!opened">
+    <template v-for="(item, index) in props.menu" :key="index">
+      <MenuItem
+        ref="items"
+        :item="item"
+        :name="props.name"
+        :index="index"
+        :disableTab="props.disableTab"
+        :disableTabIndex="props.disableTabIndex"
+        :initOpen="props.initOpen"
+        :depth="props.depth"
+        @open="open"
+        @close="close"
+        @next="next"
+        @prev="prev"
+        @tab="tab"
+        @back="back"
+        @link="link"
+        @routerChange="routerChange"
+      />
+    </template>
+  </ul>
+</template>
+
+<style scoped lang="scss"></style>

package/srl/components/Srl/Page/App.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+/**
+ * `SrlPageApp.vue`
+ *
+ * This Vue 3 component serves as the primary layout orchestrator for the application.
+ * It coordinates the loading and rendering of main application components within
+ * Suspense boundaries to handle asynchronous loading states.
+ *
+ * ## Imports
+ * - `App`: Main application component
+ * - `SrlPageData`: Component responsible for loading and preparing page content
+ * - `SrlPageModal`: Modal dialog component for displaying dynamic content
+ * - `ref`: Vue reactivity utility for creating mutable references
+ *
+ * ## Reactive State
+ * - `modal`: Reference to the SrlPageModal component instance
+ *
+ * ## Methods
+ * - `modalContent(html)`: Asynchronous method to set the content of the modal dialog
+ *   - Delegates to the modal component's setContent method
+ *   - Takes HTML string as input for display in the modal
+ *
+ * ## Exposed API
+ * - The component exposes the modal reference and modalContent function
+ *   for parent components to access and control the modal dialog
+ *
+ * ## Template Structure
+ * - Uses three Suspense components to handle asynchronous loading:
+ *   1. SrlPageData: Loads and prepares page content based on current route
+ *   2. App: Main application component with primary UI elements
+ *   3. SrlPageModal: Modal dialog component for overlay content
+ *
+ * ## Usage Context
+ * This component acts as the structural foundation of the application,
+ * managing the loading sequence of content and providing modal functionality
+ * to other components in the application.
+ */
+import App from '@/App.vue';
+import { ref, watch } from 'vue';
+
+const styleElement = document.createElement('style');
+document.head.appendChild(styleElement);
+
+const styleContent = ref<string[]>([]);
+function addCssStyles(styles: string) {
+  styleContent.value.includes(styles) || styleContent.value.push(styles);
+}
+watch(
+  styleContent.value,
+  (newStyles) => {
+    styleElement.innerHTML = newStyles.join('');
+  },
+  { immediate: true },
+);
+
+defineExpose({
+  addCssStyles,
+});
+</script>
+
+<template>
+  <suspense>
+    <App />
+  </suspense>
+</template>

package/srl/components/Srl/Page/Dialog.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import SrlPageCustomDialog from '@//Dialog.vue';
+import Autoload from '@/Autoload.ts';
+
+const props = withDefaults(
+  defineProps<{
+    header?: string;
+    content?: string;
+  }>(),
+  {
+    header: '',
+    content: '',
+  },
+);
+
+const $el = ref<HTMLDialogElement | null>(null);
+const dialogState = ref<boolean>(false);
+
+const header = ref<string>(props.header);
+const content = ref<string>(props.content);
+
+function setDialogContent(template: string) {
+  content.value = template;
+}
+
+function setDialogContentAndOpen(template: string) {
+  setDialogContent(template);
+  open();
+}
+
+function open() {
+  $el.value?.showModal();
+  dialogState.value = true;
+  $el.value?.querySelector('.srl-dialog__main')?.focus();
+  Autoload.init($el.value);
+}
+
+function close() {
+  $el.value?.close();
+  dialogState.value = false;
+}
+
+function clearContent() {
+  header.value = '';
+  content.value = '';
+}
+
+defineExpose({
+  $el,
+  dialogState,
+  setDialogContent,
+  setDialogContentAndOpen,
+  open,
+  close,
+});
+</script>
+
+<template>
+  <dialog
+    ref="$el"
+    id="srl-page__dialog"
+    class="srl-page__dialog"
+    aria-modal="true"
+    @click.stop="close"
+  >
+    <SrlAriaTabChain @click.stop>
+      <SrlPageCustomDialog :header="header" :content="content" @close="close" />
+    </SrlAriaTabChain>
+  </dialog>
+</template>

package/srl/composables/article.ts

@@ -0,0 +1,24 @@
+import { computed, type ComputedRef } from 'vue';
+import { useRoute } from 'vue-router';
+import useArticles from './articles';
+
+const articles = useArticles();
+
+export default function useArticle(): ComputedRef<NsWowArticle | undefined> {
+  const route = useRoute();
+  return computed<NsWowArticle | undefined>(() => {
+    const slug = route.params.slug
+      ? (route.params.slug[0] as string)
+      : undefined;
+    const article = !slug
+      ? articles.value.find((article) => article.index)
+      : articles.value.find((article) => article.slug === slug);
+
+    if (!article) {
+      console.error(`Article not found for slug: ${route.path}`);
+      return undefined;
+    }
+
+    return article;
+  });
+}

package/srl/composables/articles.ts

@@ -0,0 +1,41 @@
+/**
+ * `articles.ts`
+ *
+ * This Vue 3 composable provides access to localized article data.
+ * It implements a singleton pattern to ensure only one computed reference
+ * is created and reused across the application.
+ *
+ * ## Imports
+ * - `useConfig`: Composable for accessing application configuration
+ * - `computed`, `ComputedRef`: Vue reactivity utilities
+ *
+ * ## Variables
+ * - `computedStorage`: Singleton storage for the computed article reference
+ *
+ * ## Function: useArticles
+ * - Asynchronous function that returns a computed reference to articles
+ * - Only initializes the computed reference on first call
+ * - Returns the same reference on subsequent calls
+ * - Articles are filtered by the current locale from the configuration
+ *
+ * ## Return Value
+ * - ComputedRef<NsWowArticle[]>: A computed reference to an array of articles
+ *   in the current locale
+ *
+ * ## Usage Example
+ * ```typescript
+ * const articles = await useArticles()
+ * console.log(articles.value) // Array of articles in the current locale
+ */
+import { computed, type ComputedRef } from 'vue';
+import useConfig from './config.ts';
+
+const config = useConfig();
+
+const articles = computed<NsWowArticle[]>(
+  () => config.value?.articles[config.value.locale],
+);
+
+export default function useArticles(): ComputedRef<NsWowArticle[]> {
+  return articles;
+}