aloha-vue 2.80.1 → 2.82.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/ACheckbox/ACheckbox.js

@@ -274,6 +274,11 @@ export default {
       type: Boolean,
       required: false,
     },
+    readonlyValueParentClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: undefined,
+    },
     readonlyDefault: {
       type: String,
       required: false,
@@ -623,6 +628,7 @@ export default {
     if (this.readonly) {
       return h(AFormReadonly, {
         ...this.$attrs,
+        valueParentClass: this.readonlyValueParentClass,
         id: this.htmlIdLocal,
         alwaysTranslate: this.alwaysTranslate,
         excludeRenderAttributes: this.excludeRenderAttributes,

package/src/ui/ACheckbox/ACheckboxItem/ACheckboxItem.js

@@ -97,6 +97,11 @@ export default {
       type: Boolean,
       required: false,
     },
+    readonlyValueParentClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: undefined,
+    },
     searching: {
       type: Boolean,
       required: false,
@@ -190,6 +195,7 @@ export default {
   render() {
     if (this.readonly) {
       return h(AElement, {
+        class: this.readonlyValueParentClass,
         alwaysTranslate: this.alwaysTranslate,
         classDefault: "",
         extra: {

package/src/ui/ADatepicker/ADatepicker.js

@@ -206,6 +206,11 @@ export default {
       type: Boolean,
       required: false,
     },
+    readonlyValueParentClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: undefined,
+    },
     readonlyDefault: {
       type: String,
       required: false,
@@ -555,6 +560,7 @@ export default {
     if (this.readonly) {
       return h(AFormReadonly, {
         ...this.$attrs,
+        valueParentClass: this.readonlyValueParentClass,
         id: this.htmlIdLocal,
         alwaysTranslate: this.alwaysTranslate,
         class: this.class,

package/src/ui/ADatepickerRange/ADatepickerRange.js

@@ -246,6 +246,11 @@ export default {
       type: Boolean,
       required: false,
     },
+    readonlyValueParentClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: undefined,
+    },
     readonlyDefault: {
       type: String,
       required: false,
@@ -385,7 +390,7 @@ export default {
         required: this.required,
         style: this.componentStyleHide,
         type: "dateRange",
-        valueParentClass: "a_form_element_readonly_value_range",
+        valueParentClass: ["a_form_element_readonly_value_range", this.readonlyValueParentClass],
       }, () => [
         h(ADatepicker, {
           id: this.idFrom,

package/src/ui/AFieldset/AFieldset.js

@@ -205,6 +205,11 @@ export default {
       type: Boolean,
       required: false,
     },
+    readonlyValueParentClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: undefined,
+    },
     readonlyDefault: {
       type: String,
       required: false,
@@ -409,6 +414,7 @@ export default {
               idPrefix: this.idPrefix,
               onUpdateData: ({ dataKeyByKeyId }) => this.onUpdateDataLocal({ item, dataKeyByKeyId }),
               class: classColumn,
+              readonlyValueParentClass: this.readonlyValueParentClass,
               ...item,
               change: ({ currentModel, id, item: _item, model, props, fullModel }) => this.onUpdateModelLocal({
                 currentModel, id, item: _item, model, props, component: item, fullModel,
@@ -451,7 +457,7 @@ export default {
         required: this.required,
         style: this.componentStyleHide,
         type: "fieldset",
-        valueParentClass: this.classColumnsReadonly,
+        valueParentClass: [this.classColumnsReadonly, this.readonlyValueParentClass],
       }, () => CONTENT);
     }
 

package/src/ui/AForm/AForm.js

@@ -86,6 +86,11 @@ export default {
       type: Boolean,
       required: false,
     },
+    readonlyValueParentClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: undefined,
+    },
     readonlyDefault: {
       type: String,
       required: false,
@@ -246,6 +251,7 @@ export default {
             useFlatModel: IS_CONTAINER ? this.useFlatModel : undefined,
             idPrefix: this.idPrefix,
             excludeRenderAttributes: this.excludeRenderAttributes,
+            readonlyValueParentClass: this.readonlyValueParentClass,
             ...item,
             change: ({ currentModel, id, item: _item, model, props, fullModel }) => this.onUpdateModelLocal({
               currentModel, id, item: _item, model, props, component: item, fullModel,

package/src/ui/AFormElement/AFormElement.js

@@ -124,6 +124,11 @@ export default {
       type: Boolean,
       required: false,
     },
+    readonlyValueParentClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: undefined,
+    },
     readonlyDefault: {
       type: String,
       required: false,

package/src/ui/AFormReadonly/AFormReadonly.js

@@ -100,7 +100,7 @@ export default {
       default: undefined,
     },
     valueParentClass: {
-      type: [String, Object],
+      type: [String, Object, Array],
       required: false,
       default: undefined,
     },

package/src/ui/AGroup/AGroup.js

@@ -170,6 +170,11 @@ export default {
       type: Boolean,
       required: false,
     },
+    readonlyValueParentClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: undefined,
+    },
     readonlyDefault: {
       type: String,
       required: false,
@@ -328,7 +333,7 @@ export default {
         "aria-describedby": this.ariaDescribedbyLocal,
       }, [
         h("div", {
-          class: this.classColumns,
+          class: [this.classColumns, this.readonly && this.readonlyValueParentClass],
         }, [
           this.firstChild.label && h(ALabel, {
             id: this.htmlIdFirstChild,
@@ -394,10 +399,12 @@ export default {
                 parentId,
                 idPrefix: this.idPrefix,
                 onUpdateData: ({ dataKeyByKeyId }) => this.onUpdateDataLocal({ item, dataKeyByKeyId }),
+                readonlyValueParentClass: this.readonlyValueParentClass,
                 ...item,
                 change: ({ currentModel, id, item: _item, model, props }) => this.onUpdateModelLocal({
                   currentModel, id, item: _item, model, props, component: item,
                 }),
+                readonly: this.readonly || item.readonly,
                 disabled: this.disabled || item.disabled,
                 ...this.specificAttributes[item.id],
                 label: itemIndex === 0 ? undefined : item.label,

package/src/ui/AInput/AInput.js

@@ -199,6 +199,11 @@ export default {
       type: Boolean,
       required: false,
     },
+    readonlyValueParentClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: undefined,
+    },
     readonlyDefault: {
       type: String,
       required: false,
@@ -374,6 +379,7 @@ export default {
     if (this.readonly) {
       return h(AFormReadonly, {
         ...this.$attrs,
+        valueParentClass: this.readonlyValueParentClass,
         id: this.htmlIdLocal,
         alwaysTranslate: this.alwaysTranslate,
         excludeRenderAttributes: this.excludeRenderAttributes,

package/src/ui/AInputCurrency/AInputCurrency.js

@@ -264,6 +264,11 @@ export default {
       type: Boolean,
       required: false,
     },
+    readonlyValueParentClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: undefined,
+    },
     readonlyDefault: {
       type: String,
       required: false,
@@ -451,6 +456,7 @@ export default {
     if (this.readonly) {
       return h(AFormReadonly, {
         ...this.$attrs,
+        valueParentClass: this.readonlyValueParentClass,
         id: this.htmlIdLocal,
         alwaysTranslate: this.alwaysTranslate,
         excludeRenderAttributes: this.excludeRenderAttributes,

package/src/ui/AInputFile/AInputFile.js

@@ -6,6 +6,7 @@ import {
 } from "vue";
 import {
   AFormLabelDescription,
+  AFormReadonly,
 } from "../../index";
 
 import AErrorsText from "../AErrorsText/AErrorsText";
@@ -57,6 +58,20 @@ export default {
       type: [String, Number, Object, Array],
       required: false,
     },
+    readonly: {
+      type: Boolean,
+      required: false,
+    },
+    readonlyDefault: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    readonlyValueParentClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: undefined,
+    },
     text: {
       type: String,
       required: false,
@@ -164,6 +179,26 @@ export default {
       return null;
     }
 
+    if (this.readonly) {
+      return h(AFormReadonly, {
+        ...this.$attrs,
+        id: this.htmlIdLocal,
+        alwaysTranslate: this.alwaysTranslate,
+        excludeRenderAttributes: this.excludeRenderAttributes,
+        extra: this.extra,
+        helpText: this.helpText,
+        label: this.label,
+        labelClass: this.labelClass,
+        labelScreenReader: this.labelScreenReader,
+        readonlyDefault: this.readonlyDefault,
+        style: this.componentStyleHide,
+        type: this.type,
+        valueParentClass: this.readonlyValueParentClass,
+      }, this.isModel ?
+        () => h("ul", {}, this.modelValueListLocal.map(model => h("li", {}, model.name))) :
+        undefined);
+    }
+
     return h("div", {
       ...this.$attrs,
       style: this.componentStyleHide,
@@ -172,11 +207,11 @@ export default {
       h("div", {
         class: "a_form_element__parent",
       }, [
-        this.label && h(ALabel, {
-          id: this.htmlIdLocal,
-          alwaysTranslate: this.alwaysTranslate,
-          extra: this.extra,
-          label: this.label,
+        this.label && h(ALabel, {
+          id: this.htmlIdLocal,
+          alwaysTranslate: this.alwaysTranslate,
+          extra: this.extra,
+          label: this.label,
           labelClass: this.labelClass,
           labelScreenReader: this.labelScreenReader,
           required: this.required,

package/src/ui/AInputNumber/AInputNumber.js

@@ -139,6 +139,11 @@ export default {
       type: Boolean,
       required: false,
     },
+    readonlyValueParentClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: undefined,
+    },
     readonlyDefault: {
       type: String,
       required: false,
@@ -331,6 +336,7 @@ export default {
     if (this.readonly) {
       return h(AFormReadonly, {
         ...this.$attrs,
+        valueParentClass: this.readonlyValueParentClass,
         id: this.htmlIdLocal,
         alwaysTranslate: this.alwaysTranslate,
         excludeRenderAttributes: this.excludeRenderAttributes,

package/src/ui/AInputNumberRange/AInputNumberRange.js

@@ -214,6 +214,11 @@ export default {
       type: Boolean,
       required: false,
     },
+    readonlyValueParentClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: undefined,
+    },
     readonlyDefault: {
       type: String,
       required: false,
@@ -368,7 +373,7 @@ export default {
         required: this.required,
         style: this.componentStyleHide,
         type: "numberRange",
-        valueParentClass: "a_form_element_readonly_value_range",
+        valueParentClass: ["a_form_element_readonly_value_range", this.readonlyValueParentClass],
       }, () => [
         h(AInputNumber, {
           id: this.idMin,

package/src/ui/AJson/AJson.js

@@ -161,6 +161,11 @@ export default {
       type: Boolean,
       required: false,
     },
+    readonlyValueParentClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: undefined,
+    },
     readonlyDefault: {
       type: String,
       required: false,
@@ -267,6 +272,7 @@ export default {
     if (this.readonly) {
       return h(AFormReadonly, {
         ...this.$attrs,
+        valueParentClass: this.readonlyValueParentClass,
         id: this.htmlIdLocal,
         alwaysTranslate: this.alwaysTranslate,
         excludeRenderAttributes: this.excludeRenderAttributes,