aloha-vue 2.79.0 → 2.80.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aloha-vue",
-  "version": "2.79.0",
+  "version": "2.80.0",
   "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/ACarousel/compositionAPI/IndicatorsAPI.js

@@ -11,11 +11,9 @@ import {
   AKeyIndex,
 } from "../../const/AKeys";
 import {
+  cloneDeep,
   floor,
   forEach,
-} from "lodash";
-import {
-  cloneDeep,
   isNil,
   min,
   round,

package/src/AWizard/compositionAPI/ClassAPI.js

@@ -5,7 +5,7 @@ import {
 
 import {
   snakeCase,
-} from "lodash";
+} from "lodash-es";
 
 export default function ClassAPI(props, {
   subTypeLocal = computed(() => undefined),

package/src/ui/AMultiselectOrdered/compositionAPI/AllAPI.js

@@ -6,12 +6,10 @@ import {
   AKeyId,
 } from "../../../index";
 
-import {
-  forEach,
-} from "lodash";
 import {
   cloneDeep,
   filter,
+  forEach,
 } from "lodash-es";
 
 export default function AllAPI(props, {

package/src/ui/ARadio/compositionAPI/ReadonlyAPI.js

@@ -5,7 +5,7 @@ import {
 
 import {
   forEach,
-} from "lodash";
+} from "lodash-es";
 
 export default function ReadonlyAPI(props, {
   dataKeyByKeyIdLocal = computed(() => ({})),

package/src/ui/AValidatedJson/AValidatedJson.js

@@ -219,6 +219,11 @@ export default {
       required: false,
       default: () => [],
     },
+    valueKey: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
     useFlatErrors: {
       type: Boolean,
       required: false,
@@ -289,6 +294,8 @@ export default {
       closeModalCreateListMode,
       deleteListMode,
       isModalCreateListModeVisible,
+      getListModeErrors,
+      listModeItems,
       moveListMode,
       modelListMode,
       openModalCreateListMode,
@@ -321,6 +328,8 @@ export default {
       open,
       closeModalCreateListMode,
       isModalCreateListModeVisible,
+      getListModeErrors,
+      listModeItems,
       modelListMode,
       modelJsonModeSorted,
       btnIdAdd,
@@ -422,7 +431,7 @@ export default {
               class: "a_list_group",
             }, [
               this.modelListMode.length > 0 ?
-                this.modelListMode.map((item, index) => {
+                this.listModeItems.map((item, index) => {
                   return h(AValidatedJsonItem, {
                     key: index,
                     children: this.childrenFiltered,
@@ -430,11 +439,11 @@ export default {
                     deactivatePreview: this.deactivatePreview,
                     elementLabel: this.elementLabelTranslated,
                     elementTemplate: this.elementTemplate,
-                    errors: this.errors?.[index],
+                    errors: this.getListModeErrors(index),
                     hidePosition: this.hidePosition,
                     isLast: index === this.modelListMode.length - 1,
                     mode: this.mode,
-                    modelAll: this.modelListMode,
+                    modelAll: this.listModeItems,
                     modelIndex: index,
                     modelItem: item,
                     parentHtmlId: this.htmlIdLocal,
@@ -487,7 +496,7 @@ export default {
                 elementLabelTranslated: this.elementLabelTranslated,
                 isCreate: true,
                 mode: "list",
-                modelAll: this.modelListMode,
+                modelAll: this.listModeItems,
                 typedBaseId: this.typedBaseId,
                 typedChildren: this.typedChildren,
                 uniqueChildrenIds: this.uniqueChildrenIds,

package/src/ui/AValidatedJson/README.md

@@ -0,0 +1,45 @@
+# AValidatedJson: lists of primitive values
+
+Use `mode="list"` with the optional `valueKey` prop to edit a primitive array.
+The matching child field defines the editor and its validation rules.
+
+```vue
+<a-validated-json
+  v-model="tags"
+  mode="list"
+  value-key="value"
+  :children="[{ id: 'value', type: 'text', label: 'Tag', required: true }]"
+  element-template="{{ value }}"
+/>
+```
+
+```js
+const tags = ref(["Aloha", "Vue"]);
+```
+
+- `valueKey` defaults to `undefined`. Object lists, JSON mode and single mode
+  retain their existing behavior. `valueKey` only applies to list mode.
+- The public `v-model`, `update:modelValue` event and `change` callback contain
+  primitive arrays, including `0`, `false`, empty strings and `null`.
+- Internally the component wraps each value under `valueKey` for forms,
+  labels, previews and uniqueness checks. No wrapper component or plugin
+  registration is needed. `valueKey` should identify the list's editable field.
+- Use an `integer` or `switch` child to edit numbers or booleans.
+- `uniqueChildrenIds: ['value']` prevents duplicate values when requested.
+- Errors such as `{ 0: ['Invalid value'] }` are passed to the corresponding
+  value field. Already structured errors such as
+  `{ 0: { value: ['Invalid value'] } }` are also supported.
+- `readonly`, ordering, deleting and editing use the usual list controls.
+
+With `AForm`, use the same options on a field of type `validatedJson`:
+
+```js
+const data = [{
+  id: "tags",
+  type: "validatedJson",
+  mode: "list",
+  valueKey: "value",
+  children: [{ id: "value", type: "text", label: "Tag" }],
+}];
+// model: { tags: ["Aloha", "Vue"] }
+```

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

@@ -0,0 +1,103 @@
+import {
+  nextTick,
+  reactive,
+} from "vue";
+import {
+  describe,
+  expect,
+  it,
+  vi,
+} from "vitest";
+
+import ListModeAPI from "../compositionAPI/ListModeAPI";
+
+vi.mock("../../../utils/utilsDOM", () => ({
+  setFocusToElement: vi.fn(),
+}));
+
+function createList(modelValue, valueKey = "value", errors) {
+  const props = reactive({
+    id: "values",
+    change: vi.fn(),
+    modelValue,
+    valueKey,
+    errors,
+  });
+  const emit = vi.fn();
+  const api = ListModeAPI(props, { emit }, {});
+  return { api, emit, props };
+}
+
+describe("AValidatedJson primitive lists", () => {
+  it("wraps values for forms and reacts to external model and key changes", () => {
+    const { api, props } = createList(["Aloha", 0, false, null]);
+    expect(api.listModeItems.value).toEqual([
+      { value: "Aloha" }, { value: 0 }, { value: false }, { value: null },
+    ]);
+    expect(api.modelListMode.value).toEqual(["Aloha", 0, false, null]);
+    props.valueKey = "entry";
+    props.modelValue = ["Vue"];
+    expect(api.listModeItems.value).toEqual([{ entry: "Vue" }]);
+  });
+
+  it.each(["text", "", 0, false, null])("creates and updates the primitive %j", value => {
+    const { api, emit, props } = createList(["old"]);
+    api.openModalCreateListMode();
+    api.closeModalCreateListMode({ model: { value } });
+    expect(api.isModalCreateListModeVisible.value).toBe(false);
+    expect(emit).toHaveBeenLastCalledWith("update:modelValue", ["old", value]);
+    expect(props.change).toHaveBeenLastCalledWith({
+      currentModel: ["old", value], model: ["old", value], id: "values",
+    });
+    api.updateListMode({ index: 0, model: { value } });
+    expect(emit).toHaveBeenLastCalledWith("update:modelValue", [value]);
+    expect(props.modelValue).toEqual(["old"]);
+  });
+
+  it("supports an initially undefined model and cancelling the create dialog", () => {
+    const { api, emit } = createList(undefined);
+    expect(api.listModeItems.value).toEqual([]);
+    api.openModalCreateListMode();
+    api.closeModalCreateListMode();
+    expect(emit).not.toHaveBeenCalled();
+    api.closeModalCreateListMode({ model: { value: "first" } });
+    expect(emit).toHaveBeenLastCalledWith("update:modelValue", ["first"]);
+  });
+
+  it("keeps primitive values when moving and deleting without changing the input", async() => {
+    const { api, emit, props } = createList([0, false, "last"]);
+    api.moveListMode({ action: "up", index: 1 });
+    expect(emit).toHaveBeenLastCalledWith("update:modelValue", [false, 0, "last"]);
+    api.moveListMode({ action: "down", index: 0 });
+    expect(emit).toHaveBeenLastCalledWith("update:modelValue", [false, 0, "last"]);
+    api.deleteListMode({ index: 1 });
+    expect(emit).toHaveBeenLastCalledWith("update:modelValue", [0, "last"]);
+    expect(props.modelValue).toEqual([0, false, "last"]);
+    await nextTick();
+  });
+
+  it("associates primitive element errors with the configured field", () => {
+    const { api } = createList(["invalid"], "value", { 0: ["Invalid value"] });
+    expect(api.getListModeErrors(0)).toEqual({ value: ["Invalid value"] });
+    expect(api.getListModeErrors(1)).toBeUndefined();
+  });
+
+  it("preserves already structured errors", () => {
+    const errors = { 0: { value: ["Invalid value"] } };
+    const { api } = createList(["invalid"], "value", errors);
+    expect(api.getListModeErrors(0)).toEqual(errors[0]);
+  });
+
+  it("keeps the existing object-list contract when valueKey is omitted", () => {
+    const { api, emit, props } = createList([{ text: "old" }], undefined);
+    // Explicitly unset the helper default to exercise the public default.
+    props.valueKey = undefined;
+    expect(api.listModeItems.value).toEqual([{ text: "old" }]);
+    api.closeModalCreateListMode({ model: { text: "new" } });
+    expect(emit).toHaveBeenLastCalledWith("update:modelValue", [
+      { text: "old" }, { text: "new" },
+    ]);
+    api.updateListMode({ index: 0, model: { text: "updated" } });
+    expect(emit).toHaveBeenLastCalledWith("update:modelValue", [{ text: "updated" }]);
+  });
+});

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

@@ -0,0 +1,121 @@
+import {
+  h,
+  nextTick,
+} from "vue";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+} from "vitest";
+import {
+  mount,
+} from "@vue/test-utils";
+import {
+  AFieldset,
+  AForm,
+  AValidatedJson,
+} from "../../../index";
+
+import AValidatedJsonItem from "../AValidatedJsonItem/AValidatedJsonItem";
+import AValidatedJsonModalCreateOrUpdate from "../AValidatedJsonModalCreateOrUpdate/AValidatedJsonModalCreateOrUpdate";
+
+import {
+  setI18n,
+  updateTranslation,
+} from "../../../ATranslation/compositionAPI/ATranslationAPI";
+
+const wrappers = [];
+beforeEach(async() => {
+  setI18n({ de: {} });
+  updateTranslation();
+  await nextTick();
+});
+afterEach(() => {
+  wrappers.forEach(wrapper => wrapper.unmount());
+  wrappers.length = 0;
+});
+
+function mountList(props = {}) {
+  const wrapper = mount(AValidatedJson, {
+    props: {
+      id: "values",
+      mode: "list",
+      valueKey: "value",
+      modelValue: ["Aloha", "Vue"],
+      elementTemplate: "{{ value }}",
+      children: [{ id: "value", type: "text", label: "Value", required: true }],
+      ...props,
+    },
+    global: {
+      stubs: {
+        AModalForm: { render() {
+          return h("div");
+        } },
+      },
+    },
+  });
+  wrappers.push(wrapper);
+  return wrapper;
+}
+
+describe("AValidatedJson valueKey rendering", () => {
+  it("displays primitive values in readonly labels and previews", async() => {
+    const wrapper = mountList({ readonly: true });
+    expect(wrapper.findAll("strong").map(label => label.text())).toEqual(["1. Aloha", "2. Vue"]);
+    expect(wrapper.find(".test_add").exists()).toBe(false);
+    expect(wrapper.findAllComponents(AValidatedJsonItem)[0].props("modelItem")).toEqual({ value: "Aloha" });
+    await wrapper.find(".test_toggle_details").trigger("click");
+    const preview = wrapper.findComponent(AValidatedJsonItem).findComponent(AFieldset);
+    expect(preview.props("readonly")).toBe(true);
+    expect(preview.props("modelValue")).toEqual({ value: "Aloha" });
+  });
+
+  it("supplies object models to editing and emits primitive arrays", async() => {
+    const wrapper = mountList({ errors: { 0: ["Invalid value"] } });
+    const item = wrapper.findAllComponents(AValidatedJsonItem)[0];
+    expect(item.props("errors")).toEqual({ value: ["Invalid value"] });
+    item.vm.openModalUpdate();
+    await wrapper.vm.$nextTick();
+    const modal = wrapper.findComponent(AValidatedJsonModalCreateOrUpdate);
+    expect(modal.props("currentModel")).toEqual({ value: "Aloha" });
+    modal.props("close")({ model: { value: "Updated" } });
+    expect(wrapper.emitted("update:modelValue").at(-1)).toEqual([["Updated", "Vue"]]);
+  });
+
+  it("checks uniqueness against the wrapped primitive values", async() => {
+    const wrapper = mountList({ uniqueChildrenIds: ["value"] });
+    await wrapper.find(".test_add").trigger("click");
+    const modal = wrapper.findComponent(AValidatedJsonModalCreateOrUpdate);
+    expect(modal.props("modelAll")).toEqual([{ value: "Aloha" }, { value: "Vue" }]);
+    modal.vm.changeDataForm({ fullModel: { value: "Aloha" } });
+    await modal.vm.$nextTick();
+    modal.vm.save();
+    expect(wrapper.emitted("update:modelValue")).toBeUndefined();
+    modal.vm.changeDataForm({ fullModel: { value: "New" } });
+    await modal.vm.$nextTick();
+    modal.vm.save();
+    expect(wrapper.emitted("update:modelValue").at(-1)).toEqual([["Aloha", "Vue", "New"]]);
+  });
+
+  it("works through AForm without registering a wrapper component", () => {
+    const wrapper = mount(AForm, {
+      props: {
+        modelValue: { tags: ["Aloha"] },
+        data: [{
+          id: "tags",
+          type: "validatedJson",
+          mode: "list",
+          valueKey: "value",
+          children: [{ id: "value", type: "text" }],
+        }],
+      },
+    });
+    wrappers.push(wrapper);
+    const list = wrapper.findComponent(AValidatedJson);
+    expect(list.findComponent(AValidatedJsonItem).props("modelItem")).toEqual({ value: "Aloha" });
+    list.vm.closeModalCreateListMode({ model: { value: "Vue" } });
+    expect(wrapper.emitted("update:modelValue").at(-1)).toEqual([{ tags: ["Aloha", "Vue"] }]);
+  });
+});

package/src/ui/AValidatedJson/compositionAPI/ListModeAPI.js

@@ -10,7 +10,9 @@ import {
 } from "../../../utils/utilsDOM";
 import {
   cloneDeep,
+  get,
   isArray,
+  set,
 } from "lodash-es";
 
 export default function ListModeAPI(props, { emit }, {
@@ -18,6 +20,8 @@ export default function ListModeAPI(props, { emit }, {
 }) {
   const change = toRef(props, "change");
   const id = toRef(props, "id");
+  const errors = toRef(props, "errors");
+  const valueKey = toRef(props, "valueKey");
   const modelValue = toRef(props, "modelValue");
 
   const isModalCreateListModeVisible = ref(false);
@@ -28,6 +32,27 @@ export default function ListModeAPI(props, { emit }, {
       [];
   });
 
+  /*
+   * Forms, previews and uniqueness checks keep their object-based contract.
+   * Only the public model and change payloads contain primitive values.
+   */
+  const listModeItems = computed(() => {
+    if (!valueKey.value) {
+      return modelListMode.value;
+    }
+    return modelListMode.value.map(value => set({}, valueKey.value, value));
+  });
+
+  const getListModeValue = model => valueKey.value ? get(model, valueKey.value) : model;
+
+  const getListModeErrors = index => {
+    const ERRORS = errors.value?.[index];
+    if (valueKey.value && (typeof ERRORS === "string" || isArray(ERRORS))) {
+      return set({}, valueKey.value, ERRORS);
+    }
+    return ERRORS;
+  };
+
   const openModalCreateListMode = () => {
     isModalCreateListModeVisible.value = true;
   };
@@ -35,7 +60,7 @@ export default function ListModeAPI(props, { emit }, {
   const closeModalCreateListMode = ({ model } = {}) => {
     if (model) {
       const MODEL_VALUE = cloneDeep(modelListMode.value);
-      MODEL_VALUE.push(model);
+      MODEL_VALUE.push(getListModeValue(model));
       emit("update:modelValue", cloneDeep(MODEL_VALUE));
       change.value({
         currentModel: MODEL_VALUE,
@@ -123,7 +148,7 @@ export default function ListModeAPI(props, { emit }, {
 
   const updateListMode = ({ index, model }) => {
     const MODEL = cloneDeep(modelListMode.value);
-    MODEL.splice(index, 1, model);
+    MODEL.splice(index, 1, getListModeValue(model));
     emit("update:modelValue", cloneDeep(MODEL));
     change.value({
       currentModel: MODEL,
@@ -136,6 +161,8 @@ export default function ListModeAPI(props, { emit }, {
     closeModalCreateListMode,
     deleteListMode,
     isModalCreateListModeVisible,
+    getListModeErrors,
+    listModeItems,
     modelListMode,
     moveListMode,
     openModalCreateListMode,

package/src/ui/utils/utils.js

@@ -1,6 +1,3 @@
-import {
-  isArray,
-} from "lodash";
 import {
   typesContainer,
   typesModelArray,
@@ -10,6 +7,7 @@ import {
   filter,
   forEach,
   get,
+  isArray,
   isEmpty,
   isNil,
 } from "lodash-es";