@simple-reporting/base 1.0.12 → 1.0.14

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

@@ -1,41 +1,42 @@
 <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';
+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'
 
 type BackButtonItem = {
-  title?: string;
+  title?: string
   img?: {
-    src: string;
-    alt?: string;
-  };
+    src: string
+    alt?: string
+  }
   imgBefore?: {
-    src: string;
-    alt?: string;
-  };
+    src: string
+    alt?: string
+  }
   imgAfter?: {
-    src: string;
-    alt?: string;
-  };
+    src: string
+    alt?: string
+  }
   attributes?: {
-    [key: string]: string;
-  };
-};
+    [key: string]: string
+  }
+}
 
 const props = defineProps<{
-  name: string;
-  item: NsWowNavigationItem;
-  index: number | string;
-  disableTab: boolean;
-  disableTabIndex: boolean;
-  initOpen: number;
-  depth: number;
-  backButonEnabled?: boolean;
-  backButtonLabel?: string;
+  name: string
+  item: NsWowNavigationItem
+  index: number | string
+  disableTab: boolean
+  disableTabIndex: boolean
+  initOpen: number
+  depth: number
+  disableClasses: boolean
+  backButonEnabled?: boolean
+  backButtonLabel?: string
   backButtonItem: BackButtonItem
-}>();
+}>()
 
 const emit = defineEmits([
   'open',
@@ -46,109 +47,135 @@ const emit = defineEmits([
   'prev',
   'tab',
   'back',
-]);
-const id = ref<number | string | undefined>();
+])
+const id = ref<number | string | undefined>()
 if (props.item.children) {
-  id.value = useId();
+  id.value = useId()
 }
 
-const external = ref(props.item.href && isExternalPath(props.item.href));
+const external = ref(props.item.href && isExternalPath(props.item.href))
 
-const menu = ref();
-const $el = ref<HTMLButtonElement | HTMLAnchorElement | typeof RouterLink>();
-const opened = ref(false);
+const menu = ref()
+const $el = ref<HTMLButtonElement | HTMLAnchorElement | typeof RouterLink>()
+const opened = ref(false)
 
 function toggle() {
-  opened.value = !opened.value;
+  opened.value = !opened.value
   if (opened.value) {
-    emit('open', { index: props.index });
+    emit('open', { index: props.index })
     nextTick(() => {
-      const item = menu.value?.items[0].$el;
-      item.$el ? item.$el.focus() : item.focus();
-    });
+      menu.value.$el.focus()
+    })
   } else {
-    menu.value.closeAll();
+    menu.value.closeAll()
   }
 }
-
 function close() {
-  emit('close', { index: props.index });
+  emit('close', { index: props.index })
 }
 
 function closeSub() {
-  $el.value?.focus();
+  $el.value?.focus()
 }
 
 function next() {
-  emit('next', { index: props.index });
+  emit('next', { index: props.index })
 }
 
 function prev() {
-  emit('prev', { index: props.index });
+  emit('prev', { index: props.index })
 }
 
 function tab(event: KeyboardEvent) {
   if (props.disableTab && event) {
-    event.stopPropagation();
-    event.preventDefault();
-    opened.value = false;
+    event.stopPropagation()
+    event.preventDefault()
+    opened.value = false
   }
-  emit('tab');
+  emit('tab')
 }
 
 function back(event: KeyboardEvent) {
   if (props.disableTab && event) {
-    event.stopPropagation();
-    event.preventDefault();
+    event.stopPropagation()
+    event.preventDefault()
   }
-  emit('back');
+  emit('back')
 }
 
 function link() {
-  !props.item.callback || props.item.callback();
-  emit('link');
+  !props.item.callback || props.item.callback()
+  emit('link')
 }
 
 function routerChange() {
-  !props.item.callback || props.item.callback();
-  emit('link');
-  emit('routerChange');
+  !props.item.callback || props.item.callback()
+  emit('link')
+  emit('routerChange')
 }
 
 function closeItem() {
-  opened.value = false;
-  menu.value?.closeAll();
+  opened.value = false
+  menu.value?.closeAll()
 }
 
 defineExpose({
   closeItem,
   $el,
   menu,
-});
+})
 
 function internalLinkClick(event: Event) {
-  !props.item.callback || props.item.callback(event);
+  !props.item.callback || props.item.callback(event)
   routerChange()
 }
 
 function externalLinkClick(event: Event) {
-  !props.item.callback || props.item.callback(event);
+  !props.item.callback || props.item.callback(event)
   link()
 }
 
 const dynamicAttributes = computed(() => {
-  return props.item.attributes ?? {};
-});
+  return props.item.attributes ?? {}
+})
+
+const classListLi = computed(() => {
+  if (props.disableClasses) return []
+
+  const res = [
+    'srl-menu__item'
+  ]
+  res.push(`srl-menu__item--level-${props.depth}`)
+  if (props.item.children) {
+    res.push('srl-menu__item--has-children')
+  } else {
+    res.push('srl-menu__item--has-no-children')
+  }
+  return res
+})
+
+const classListItem = computed(() => {
+  const res = []
+
+  !props.item.active || res.push('srl-menu__link--active')
+
+  if (!props.disableClasses) {
+    res.push('srl-menu__link')
+    res.push(`srl-menu__link--level-${props.depth}`)
+  }
+  return res
+})
+
 </script>
 
 <template>
-  <li v-if="!item.children && props.item.href">
+  <li v-if="!item.children && props.item.href" :class="classListLi">
     <router-link
       v-if="!external"
       ref="$el"
-      :tabindex="props.index === 0 && !props.disableTabIndex ? 0 : -1"
+      tabindex="-1"
       :to="props.item.href"
-      :class="{ active: item.active }"
+      :class="classListItem"
       :title="props.item.title ?? props.item.label"
       v-bind="dynamicAttributes"
       @click="internalLinkClick"
@@ -160,14 +187,19 @@ const dynamicAttributes = computed(() => {
       @keydown.shift.tab.exact="back"
       @keydown.esc.stop.prevent="close"
     >
-      <MenuItemContent :item="props.item" />
+      <MenuItemContent
+        :item="props.item"
+        :depth="props.depth"
+        :disableClasses="props.disableClasses"
+      />
     </router-link>
     <a
       v-else
-      :tabindex="props.index === 0 && !props.disableTabIndex ? 0 : -1"
+      tabindex="-1"
       ref="$el"
       :href="props.item.href"
       :title="props.item.title ?? props.item.label"
+      :class="classListItem"
       :aria-label="props.item.icon ? props.item.title ?? props.item.label : undefined"
       :target="props.item.href?.startsWith('http') ? '_blank' : undefined"
       v-bind="dynamicAttributes"
@@ -180,14 +212,19 @@ const dynamicAttributes = computed(() => {
       @keydown.shift.tab.exact="back"
       @keydown.esc.stop.prevent="close"
     >
-      <MenuItemContent :item="props.item" />
+      <MenuItemContent
+        :item="props.item"
+        :depth="props.depth"
+        :disableClasses="props.disableClasses"
+      />
     </a>
   </li>
-  <li v-else-if="props.item.callback">
+  <li v-else-if="props.item.callback" :class="classListLi">
     <button
       type="button"
       ref="$el"
-      :tabindex="props.index === 0 && !props.disableTabIndex ? 0 : -1"
+      tabindex="-1"
+      :class="classListItem"
       :title="props.item.title ?? props.item.label"
       :aria-label="props.item.icon ? props.item.title ?? props.item.label : undefined"
       v-bind="dynamicAttributes"
@@ -200,17 +237,22 @@ const dynamicAttributes = computed(() => {
       @keydown.shift.tab.exact="back"
       @keydown.esc.stop.prevent="close"
     >
-      <MenuItemContent :item="props.item" />
+      <MenuItemContent
+        :item="props.item"
+        :depth="props.depth"
+        :disableClasses="props.disableClasses"
+      />
     </button>
   </li>
-  <li v-else>
+  <li v-else :class="classListLi">
     <button
       type="button"
       ref="$el"
-      :tabindex="props.index === 0 ? 0 : -1"
+      tabindex="-1"
       :aria-haspopup="props.item.children ? 'true' : 'false'"
       :aria-expanded="opened"
       :aria-controls="`${props.name}-${id}`"
+      :class="classListItem"
       :title="props.item.title ?? props.item.label"
       :aria-label="props.item.icon ? props.item.title ?? props.item.label : undefined"
       v-bind="dynamicAttributes"
@@ -223,7 +265,11 @@ const dynamicAttributes = computed(() => {
       @keydown.shift.tab.exact="back"
       @keydown.esc.stop.prevent="close"
     >
-      <MenuItemContent :item="props.item" />
+      <MenuItemContent
+        :item="props.item"
+        :depth="props.depth"
+        :disableClasses="props.disableClasses"
+      />
     </button>
     <MenuList
       v-if="props.item.children"
@@ -234,6 +280,7 @@ const dynamicAttributes = computed(() => {
       :disableTab="props.disableTab"
       :initOpen="props.initOpen"
       :depth="props.depth + 1"
+      :disableClasses="props.disableClasses"
       :backButonEnabled="props.backButonEnabled"
       :backButtonLabel="props.backButonEnabled ? props.item.label : undefined"
       :backButtonItem="props.backButtonItem"

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

@@ -51,40 +51,41 @@
  * />
  */
 import { computed, ref } from 'vue'
-import MenuItem from './Item.vue';
+import MenuItem from './Item.vue'
 
 type BackButtonItem = {
-  title?: string;
+  title?: string
   img?: {
-    src: string;
-    alt?: string;
-  };
+    src: string
+    alt?: string
+  }
   imgBefore?: {
-    src: string;
-    alt?: string;
-  };
+    src: string
+    alt?: string
+  }
   imgAfter?: {
-    src: string;
-    alt?: string;
-  };
+    src: string
+    alt?: string
+  }
   attributes?: {
-    [key: string]: string;
-  };
-};
+    [key: string]: string
+  }
+}
 
 const props = withDefaults(
   defineProps<{
-    name: string;
-    menu: NsWowNavigationItem[];
-    id?: string;
-    disableTab?: boolean;
-    disableTabIndex?: boolean;
-    initOpen?: number;
-    singleOpen?: boolean;
-    depth?: number;
-    backButonEnabled?: boolean;
-    backButtonItem?: BackButtonItem;
-    backButtonLabel?: string;
+    name: string
+    menu: NsWowNavigationItem[]
+    id?: string
+    disableTab?: boolean
+    disableTabIndex?: boolean
+    initOpen?: number
+    singleOpen?: boolean
+    depth?: number
+    disableClasses?: boolean
+    backButonEnabled?: boolean
+    backButtonItem?: BackButtonItem
+    backButtonLabel?: string
   }>(),
   {
     disableTab: false,
@@ -92,9 +93,10 @@ const props = withDefaults(
     initOpen: 0,
     singleOpen: true,
     depth: 0,
+    disableClasses: false,
     backButtonItem: {}
   },
-);
+)
 
 const emit = defineEmits([
   'close',
@@ -105,75 +107,92 @@ const emit = defineEmits([
   'prevExceeded',
   'tab',
   'back',
-]);
-const items = ref<Array<typeof MenuItem>>([]);
+])
+const items = ref<Array<typeof MenuItem>>([])
 
-const opened = defineModel('opened', { type: Boolean, default: true });
+const opened = defineModel('opened', { type: Boolean, default: true })
 
 function open(event: { index: number }) {
   if (props.singleOpen) {
-    closeAll(event.index);
+    closeAll(event.index)
   }
 }
 
 function close() {
   if (props.initOpen < props.depth) {
-    opened.value = false;
-    emit('closeSub');
+    opened.value = false
+    emit('closeSub')
   } else {
-    emit('close');
+    emit('close')
   }
 }
 
 function next(event: { index: number }) {
-  let newIndex = event.index + 1;
-  let exceeded = false;
+  let newIndex = event.index + 1
+  let exceeded = false
   if (newIndex >= items.value.length) {
-    exceeded = true;
-    newIndex = 0;
+    exceeded = true
+    newIndex = 0
   }
-  const item = items.value[newIndex].$el;
-  item.$el ? item.$el.focus() : item.focus();
-  !exceeded || emit('nextExceeded');
+  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;
+  let newIndex = event.index - 1
+  let exceeded = false
   if (newIndex < 0) {
-    exceeded = true;
-    newIndex = items.value.length - 1;
+    exceeded = true
+    newIndex = items.value.length - 1
   }
-  const item = items.value[newIndex].$el;
-  item.$el ? item.$el.focus() : item.focus();
-  !exceeded || emit('prevExceeded');
+  const item = items.value[newIndex].$el
+  item.$el ? item.$el.focus() : item.focus()
+  !exceeded || emit('prevExceeded')
 }
 
 function tab() {
-  emit('tab');
+  emit('tab')
 }
 
 function back() {
-  emit('back');
+  emit('back')
 }
 
 function link() {
-  emit('link');
+  emit('link')
 }
 
 function routerChange() {
-  emit('routerChange');
+  emit('routerChange')
 }
 
 function closeAll(keep?: number | string) {
   items.value.forEach((item: typeof MenuItem, index: number) => {
-    if (keep !== index) item.closeItem();
-  });
+    if (keep !== index) item.closeItem()
+  })
 }
 
-const $el = ref<HTMLUListElement>();
+const $el = ref<HTMLUListElement>()
+
+function focusClickable(index: number) {
+  if (items.value[index]) {
+    if (items.value[index].$el.$el) {
+      items.value[index].$el.$el.focus()
+    } else if (items.value[index].$el) {
+      items.value[index].$el.focus()
+    }
+  }
+}
 
 const menuItems = computed<NsWowNavigationItem[]>(() => {
+  const classes: string[] = []
+  if (props.backButtonItem?.attributes?.class) {
+    props.backButtonItem.attributes.class.split(' ').forEach(c => {
+      classes.push(c)
+    })
+  }
+  classes.push('srl-menu__link--back')
   return props.backButonEnabled && props.depth ? [
       {
         label: props.backButtonLabel,
@@ -184,11 +203,13 @@ const menuItems = computed<NsWowNavigationItem[]>(() => {
         attributes: props.backButtonItem.attributes ?
           Object.assign(props.backButtonItem.attributes,
             {
+              'class': classes.join(' '),
               'aria-controls': props.id,
               'aria-expanded': opened.value
             }
           ):
           {
+            'class': classes.join(' '),
             'aria-controls': props.id,
             'aria-expanded': opened.value
           },
@@ -196,17 +217,35 @@ const menuItems = computed<NsWowNavigationItem[]>(() => {
       },
       ...props.menu,
     ] : props.menu
-});
+})
+
+const classList = computed(() => {
+  return props.disableClasses ? [] : [
+    'srl-menu',
+    `srl-menu--level-${props.depth}`,
+  ]
+})
 
 defineExpose({
   closeAll,
   $el,
   items,
-});
+})
 </script>
 
 <template>
-  <ul ref="$el" :id="props.id" :hidden="!opened">
+  <ul
+    ref="$el"
+    tabindex="0"
+    :id="props.id"
+    :class="classList"
+    :hidden="!opened"
+    @keydown.esc.prevent.stop="close"
+    @keydown.up.prevent.stop="focusClickable(menuItems.length - 1)"
+    @keydown.right.prevent.stop="focusClickable(0)"
+    @keydown.down.prevent.stop="focusClickable(0)"
+    @keydown.left.prevent.stop="focusClickable(menuItems.length - 1)"
+  >
     <template v-for="(item, index) in menuItems" :key="index">
       <MenuItem
         ref="items"
@@ -217,6 +256,7 @@ defineExpose({
         :disableTabIndex="props.disableTabIndex"
         :initOpen="props.initOpen"
         :depth="props.depth"
+        :disableClasses="props.disableClasses"
         :backButonEnabled="props.backButonEnabled"
         :backButtonLabel="props.backButtonLabel"
         :backButtonItem="props.backButtonItem"

package/srl/components/Srl/Note/Accordion/Content.vue

@@ -1,12 +1,63 @@
 <script setup lang="ts">
+import { onMounted, onUpdated, ref, watch } from 'vue'
+
 const props = defineProps<{
-  id: string
-  open: boolean
+  accordion: {
+    id: string;
+    state: boolean;
+    toggle: () => void;
+    open: () => void;
+    close: () => void;
+  };
 }>()
+
+const rootEl = ref<HTMLDivElement>()
+const focusElements = ref<HTMLElement[]>()
+
+watch(
+  props,
+  to => {
+    to.accordion.state ? setFocus() : unsetFocus()
+  }
+)
+
+function getFocusElements() {
+  const container = rootEl.value
+  const elements = container?.querySelectorAll<HTMLElement>(
+    'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
+  )
+  return Array.from(elements || []).filter(el => {
+    const hiddenParent = el.closest('[hidden]')
+    return !hiddenParent || hiddenParent === container
+  })
+}
+
+function unsetFocus() {
+  if (focusElements.value?.length) {
+    focusElements.value.forEach(el => {
+      el.tabIndex = -1
+    })
+  }
+}
+
+function setFocus() {
+  if (focusElements.value?.length) {
+    focusElements.value.forEach(el => {
+      el.tabIndex = 0
+    })
+  }
+}
+
+onMounted(() => {
+  focusElements.value = getFocusElements()
+  if (!props.accordion.state) {
+    unsetFocus()
+  }
+})
 </script>
 
 <template>
-<div :id="props.id" :hidden="!props.open">
+<div ref="rootEl" :id="props.accordion.id" :hidden="!props.accordion.state">
   <slot/>
 </div>
 </template>

package/srl/components/Srl/Note/Accordion/Toggle.vue

@@ -1,13 +1,23 @@
 <script setup lang="ts">
 const props = defineProps<{
-  id: string
-  open: boolean
-  toggle: () => void
+  accordion: {
+    id: string;
+    state: boolean;
+    toggle: () => void;
+    open: () => void;
+    close: () => void;
+  };
 }>()
+
 </script>
 
 <template>
-  <button @click="props.toggle()" :aria-expanded="props.open" :aria-controls="props.id">
+  <button
+    type="button"
+    :aria-expanded="props.accordion.state"
+    :aria-controls="props.accordion.id"
+    @click="props.accordion.toggle()"
+  >
     <slot/>
   </button>
 </template>