aloha-vue 2.80.0 → 2.80.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aloha-vue",
-  "version": "2.80.0",
+  "version": "2.80.1",
   "description": "Aloha-vue is a JavaScript library that provides a wide range of accessible components and directives for Vue.js. Accessibility is of paramount importance to us, and we have designed all our components to meet accessibility compliance criteria. This library is a valuable tool for frontend developers and has already been used in three projects, including two large-scale ones",
   "keywords": [
     "accessibility compliance criteria",

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;