aloha-vue 2.80.1 → 2.81.0

package/src/AMenu/__tests__/AMenu.test.js

@@ -0,0 +1,54 @@
+import {
+  nextTick,
+  ref,
+} from "vue";
+import {
+  describe,
+  expect,
+  it,
+} from "vitest";
+import {
+  shallowMount,
+} from "@vue/test-utils";
+
+import AMenu from "../AMenu";
+
+describe("AMenu inline placement", () => {
+  it("opts into inline placement without changing the default", async() => {
+    const wrapper = shallowMount(AMenu, {
+      props: {
+        canChangeBodyClass: false,
+        useBackdropMobile: false,
+      },
+      global: {
+        stubs: {
+          AButton: {
+            inheritAttrs: false,
+            template: "<button />",
+          },
+        },
+        config: {
+          globalProperties: {
+            $router: {
+              currentRoute: ref({ fullPath: "/" }),
+            },
+          },
+        },
+      },
+    });
+    await nextTick();
+
+    expect(wrapper.vm.searchInDom).toBe(false);
+    expect(wrapper.element.tagName).toBe("NAV");
+    expect(wrapper.classes()).not.toContain("a_menu_inline");
+
+    await wrapper.setProps({ isInline: true });
+    expect(wrapper.classes()).toContain("a_menu_inline");
+    expect(wrapper.classes()).toContain("a_menu_open");
+    expect(document.body.classList.contains("a_menu__wrapper_open")).toBe(false);
+
+    await wrapper.setProps({ isInline: false });
+    expect(wrapper.classes()).not.toContain("a_menu_inline");
+    wrapper.unmount();
+  });
+});

package/src/AMenu/compositionAPI/SearchAPI.js

@@ -5,17 +5,28 @@ import {
 } from "vue";
 
 import {
+  getElementId,
+} from "../utils/utils";
+
+import AKeyBreadcrumbs from "../const/AKeyBreadcrumbs";
+import {
+  AKeyId,
   AKeyLabel,
 } from "../../const/AKeys";
+import {
+  isBrowser,
+} from "../../utils/isBrowser";
 import {
   escapeRegExp,
   forEach,
+  map,
 } from "lodash-es";
 
 export default function SearchAPI(props, {
   dataKeyById = computed(() => ({})),
 }) {
   const menuId = toRef(props, "menuId");
+  const searchInDom = toRef(props, "searchInDom");
 
   const modelSearch = ref("");
 
@@ -47,15 +58,47 @@ export default function SearchAPI(props, {
     return escapeRegExp(modelSearch.value);
   });
 
+  const getDomLabel = id => {
+    if (!isBrowser()) {
+      return undefined;
+    }
+    const LINK = document.getElementById(getElementId({
+      menuId: menuId.value,
+      id,
+      suffix: "link",
+    }));
+    // Read source panels only; search results contain copies of the same links.
+    if (!LINK?.closest(".a_menu__panels__main:not(.a_menu__panel_search)")) {
+      return undefined;
+    }
+    return (LINK.querySelector(".a_menu__link__text") || LINK).textContent;
+  };
+
+  // shortcut: DOM translations refresh on query changes; observe mutations if live updates are needed.
   const itemsWithSearch = computed(() => {
     const ITEMS = [];
     if (isSearchActive.value) {
       const RE = new RegExp(modelSearchEscapeRegExp.value, "gi");
       forEach(dataKeyById.value, item => {
-        const ITEM_LABEL = item[AKeyLabel];
-        if (`${ ITEM_LABEL }`.search(RE) !== -1) {
+        const ITEM_LABEL = searchInDom.value ? getDomLabel(item[AKeyId]) : item[AKeyLabel];
+        if (searchInDom.value && ITEM_LABEL === undefined) {
+          return;
+        }
+        if (`${ ITEM_LABEL }`.search(RE) === -1) {
+          return;
+        }
+        if (!searchInDom.value) {
           ITEMS.push(item);
+          return;
         }
+        ITEMS.push({
+          ...item,
+          [AKeyLabel]: ITEM_LABEL,
+          [AKeyBreadcrumbs]: map(item[AKeyBreadcrumbs], breadcrumb => ({
+            ...breadcrumb,
+            label: getDomLabel(breadcrumb.parentId) ?? breadcrumb.label,
+          })),
+        });
       });
     }
     return ITEMS;

package/src/AMenu/compositionAPI/__tests__/SearchAPI.test.js

@@ -0,0 +1,108 @@
+import {
+  computed,
+  reactive,
+} from "vue";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+} from "vitest";
+
+import LabelAPI from "../../AMenuPanelLink/compositionAPI/LabelAPI";
+import SearchAPI from "../SearchAPI";
+
+import AKeyBreadcrumbs from "../../const/AKeyBreadcrumbs";
+import {
+  AKeyId,
+  AKeyLabel,
+} from "../../../const/AKeys";
+
+describe("AMenu search", () => {
+  const ITEMS = {
+    forms: { [AKeyId]: "forms", [AKeyLabel]: "Forms" },
+    input: {
+      [AKeyId]: "input",
+      [AKeyLabel]: "Input",
+      [AKeyBreadcrumbs]: [{ parentId: "forms", label: "Forms" }],
+      to: { name: "input" },
+      disabled: true,
+    },
+    missing: { [AKeyId]: "missing", [AKeyLabel]: "Eingabe missing" },
+  };
+
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <nav id="test_menu">
+        <div class="a_menu__panels__main">
+          <a id="test_menu_forms_link"><span class="a_menu__link__text">Formulare</span></a>
+          <div style="display: none">
+            <a id="test_menu_input_link">
+              <span class="a_menu__link__text"><span>Eingabe</span> [DE]</span>
+              <span class="a_menu__link__counter">99</span>
+            </a>
+          </div>
+        </div>
+        <div class="a_menu__panels__main a_menu__panel_search">
+          <a id="test_menu_input_link"><span class="a_menu__link__text">Stale result</span></a>
+          <a id="test_menu_missing_link"><span class="a_menu__link__text">Eingabe missing</span></a>
+        </div>
+      </nav>`;
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("searches data by default even when DOM text differs", () => {
+    const search = SearchAPI(reactive({ menuId: "test_menu" }), {
+      dataKeyById: computed(() => ITEMS),
+    });
+    search.updateModelSearch("INPUT");
+    expect(search.itemsWithSearch.value).toEqual([ITEMS.input]);
+    expect(search.itemsWithSearch.value[0]).toBe(ITEMS.input);
+    search.updateModelSearch("Formulare");
+    expect(search.itemsWithSearch.value).toEqual([]);
+  });
+
+  it("searches translated text in source panels and preserves link behavior and breadcrumbs", () => {
+    const search = SearchAPI(reactive({ menuId: "test_menu", searchInDom: true }), {
+      dataKeyById: computed(() => ITEMS),
+    });
+    search.updateModelSearch("eINGABE");
+    expect(search.itemsWithSearch.value).toEqual([{
+      ...ITEMS.input,
+      [AKeyLabel]: "Eingabe [DE]",
+      [AKeyBreadcrumbs]: [{ parentId: "forms", label: "Formulare" }],
+    }]);
+    const {
+      label,
+    } = LabelAPI(reactive({
+      item: search.itemsWithSearch.value[0],
+      isLinkInSearchPanel: true,
+      modelSearch: "eINGABE",
+    }));
+    expect(label.value).toBe("<mark class=\"a_search_highlight\">Eingabe</mark> [DE]");
+    expect(ITEMS.input[AKeyLabel]).toBe("Input");
+    expect(ITEMS.input[AKeyBreadcrumbs][0].label).toBe("Forms");
+    search.updateModelSearch("Input");
+    expect(search.itemsWithSearch.value).toEqual([]);
+    search.updateModelSearch("99");
+    expect(search.itemsWithSearch.value).toEqual([]);
+  });
+
+  it("treats regular expression characters literally and rereads DOM for the next query", () => {
+    const search = SearchAPI(reactive({ menuId: "test_menu", searchInDom: true }), {
+      dataKeyById: computed(() => ITEMS),
+    });
+    search.updateModelSearch("[DE]");
+    expect(search.itemsWithSearch.value).toHaveLength(1);
+    document.querySelector("#test_menu_input_link .a_menu__link__text").textContent = "Saisie (FR)";
+    search.updateModelSearch("(FR)");
+    expect(search.itemsWithSearch.value[0][AKeyLabel]).toBe("Saisie (FR)");
+    search.resetSearch();
+    expect(search.isSearchActive.value).toBe(false);
+    expect(search.itemsWithSearch.value).toEqual([]);
+  });
+});