aloha-vue 2.80.0 → 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([]);
+  });
+});

package/src/ui/AValidatedJson/__tests__/AValidatedJson.ValueKey.test.js

@@ -118,4 +118,27 @@ describe("AValidatedJson valueKey rendering", () => {
     list.vm.closeModalCreateListMode({ model: { value: "Vue" } });
     expect(wrapper.emitted("update:modelValue").at(-1)).toEqual([{ tags: ["Aloha", "Vue"] }]);
   });
+
+  it("saves a parent item containing a required primitive list", async() => {
+    const wrapper = mountList({
+      valueKey: undefined,
+      modelValue: [{ tags: ["Aloha"] }],
+      children: [{
+        id: "tags",
+        type: "validatedJson",
+        mode: "list",
+        valueKey: "value",
+        required: true,
+        children: [{ id: "value", type: "text", required: true }],
+      }],
+    });
+    wrapper.findComponent(AValidatedJsonItem).vm.openModalUpdate();
+    await nextTick();
+    const modal = wrapper.findComponent(AValidatedJsonModalCreateOrUpdate);
+    expect(modal.vm.isAnyRequiredElementEmpty).toBe(false);
+    modal.vm.changeDataForm({ fullModel: { tags: ["Aloha", "Vue"] } });
+    await nextTick();
+    modal.vm.save();
+    expect(wrapper.emitted("update:modelValue").at(-1)).toEqual([[{ tags: ["Aloha", "Vue"] }]]);
+  });
 });

package/src/ui/utils/__tests__/utils.requiredElements.test.js

@@ -0,0 +1,53 @@
+import {
+  describe,
+  expect,
+  it,
+} from "vitest";
+
+import {
+  filterVisibleRequiredUiElements,
+  isAnyRequiredUiElementEmpty,
+} from "../utils";
+
+function requiredList(children = [{ id: "value", type: "text", required: true }]) {
+  return { id: "tags", type: "validatedJson", mode: "list", valueKey: "value", required: true, children };
+}
+
+describe("required validatedJson list fields", () => {
+  it.each([
+    { values: ["Aloha"] },
+    { values: [0] },
+    { values: [false] },
+    { values: [null] },
+    { values: [{ text: "Aloha" }] },
+  ])("accepts a populated list $values without treating it as one child form", ({ values }) => {
+    const fields = filterVisibleRequiredUiElements({ elements: [requiredList()] });
+    expect(isAnyRequiredUiElementEmpty({ elements: fields, model: { tags: values } })).toBe(false);
+  });
+
+  it.each([{ values: [] }, { values: undefined }, { values: null }])("rejects an empty or absent required list $values", ({ values }) => {
+    expect(isAnyRequiredUiElementEmpty({ elements: [requiredList()], model: { tags: values } })).toBe(true);
+  });
+
+  it("retains a required list with optional item fields", () => {
+    const field = requiredList([{ id: "value", type: "text" }]);
+    const fields = filterVisibleRequiredUiElements({ elements: [field] });
+    expect(fields).toHaveLength(1);
+    expect(fields[0].children).toEqual(field.children);
+    expect(isAnyRequiredUiElementEmpty({ elements: fields, model: { tags: [] } })).toBe(true);
+  });
+
+  it("ignores optional and hidden lists", () => {
+    const fields = filterVisibleRequiredUiElements({ elements: [
+      { ...requiredList(), required: false },
+      { ...requiredList(), isHide: true },
+    ] });
+    expect(fields).toEqual([]);
+  });
+
+  it("continues checking required children in single mode", () => {
+    const fields = filterVisibleRequiredUiElements({ elements: [{ ...requiredList(), mode: "single" }] });
+    expect(isAnyRequiredUiElementEmpty({ elements: fields, model: { tags: { value: "" } } })).toBe(true);
+    expect(isAnyRequiredUiElementEmpty({ elements: fields, model: { tags: { value: "Aloha" } } })).toBe(false);
+  });
+});

package/src/ui/utils/utils.js

@@ -12,6 +12,8 @@ import {
   isNil,
 } from "lodash-es";
 
+const isValidatedJsonList = element => element.type === "validatedJson" && element.mode === "list";
+
 export function getLabelClickEventName(id) {
   return `clickALabel_${ id }`;
 }
@@ -33,7 +35,7 @@ export function filterVisibleRequiredUiElements({ elements }) {
       return false;
     }
 
-    if (element?.children?.length) {
+    if (element?.children?.length && !isValidatedJsonList(element)) {
       element.children = filterVisibleRequiredUiElements({ elements: element.children });
 
       if (!element.children.length) {
@@ -50,7 +52,7 @@ export function isAnyRequiredUiElementEmpty({ elements, model }) {
 
   forEach(elements, element => {
     const CURREN_MODEL = get(model, element.id);
-    if (typesModelArray.value[element.type]) {
+    if (typesModelArray.value[element.type] || isValidatedJsonList(element)) {
       if (!isArray(CURREN_MODEL) || !CURREN_MODEL.length) {
         isAnyEmpty = true;
         return false;