aloha-vue 2.67.0 → 2.68.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aloha-vue",
-  "version": "2.67.0",
+  "version": "2.68.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/ui/ACheckbox/ACheckbox.js

@@ -88,12 +88,17 @@ export default {
       required: false,
       default: undefined,
     },
-    dataExtra: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-    dependencies: {
+    dataExtra: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    mergeData: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    dependencies: {
       type: [Array, Object],
       required: false,
       default: undefined,

package/src/ui/AMultiselectOrdered/AMultiselectOrdered.js

@@ -119,12 +119,17 @@ export default {
       required: false,
       default: undefined,
     },
-    dataExtra: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-    dependencies: {
+    dataExtra: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    mergeData: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    dependencies: {
       type: [Array, Object],
       required: false,
       default: undefined,

package/src/ui/ARadio/ARadio.js

@@ -88,12 +88,17 @@ export default {
       required: false,
       default: undefined,
     },
-    dataExtra: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-    dependencies: {
+    dataExtra: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    mergeData: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    dependencies: {
       type: [Array, Object],
       required: false,
       default: undefined,

package/src/ui/ASelect/ASelect.js

@@ -122,12 +122,17 @@ export default {
       required: false,
       default: undefined,
     },
-    dataExtra: {
-      type: Array,
-      required: false,
-      default: () => ASelectPluginOptions.propsDefault.dataExtra,
-    },
-    dependencies: {
+    dataExtra: {
+      type: Array,
+      required: false,
+      default: () => ASelectPluginOptions.propsDefault.dataExtra,
+    },
+    mergeData: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    dependencies: {
       type: [Array, Object],
       required: false,
       default: undefined,

package/src/ui/compositionApi/UiDataWithKeyIdAndLabelAPI.js

@@ -31,9 +31,10 @@ export default function UiDataWithKeyIdAndLabelAPI(props) {
   const data = toRef(props, "data");
   const dataExtra = toRef(props, "dataExtra");
   const isDataSimpleArray = toRef(props, "isDataSimpleArray");
-  const keyId = toRef(props, "keyId");
-  const keyLabel = toRef(props, "keyLabel");
-  const keyLabelCallback = toRef(props, "keyLabelCallback");
+  const keyId = toRef(props, "keyId");
+  const keyLabel = toRef(props, "keyLabel");
+  const keyLabelCallback = toRef(props, "keyLabelCallback");
+  const mergeData = toRef(props, "mergeData");
   const searchTextInHtml = toRef(props, "searchTextInHtml");
   const translateData = toRef(props, "translateData");
 
@@ -156,7 +157,14 @@ export default function UiDataWithKeyIdAndLabelAPI(props) {
     let DATA_LOCAL = data.value || [];
 
     if (dataFromServer.value.length) {
-      DATA_LOCAL = dataFromServer.value;
+      if (mergeData.value) {
+        DATA_LOCAL = uniqBy([
+          ...dataFromServer.value,
+          ...DATA_LOCAL,
+        ], item => get(item, keyId.value, item));
+      } else {
+        DATA_LOCAL = dataFromServer.value;
+      }
     }
 
     if (!dataFromRetrieve.value.length) {

package/src/ui/compositionApi/__tests__/UiDataWithKeyIdAndLabelAPI.test.js

@@ -0,0 +1,128 @@
+import {
+  createApp,
+  defineComponent,
+} from "vue";
+import {
+  describe,
+  expect,
+  it,
+  jest,
+} from "@jest/globals";
+
+import UiDataWithKeyIdAndLabelAPI from "../UiDataWithKeyIdAndLabelAPI";
+
+import {
+  AKeyId,
+  AKeyLabel,
+} from "../../../const/AKeys";
+
+jest.mock("../../../index", () => ({
+  AKeyId: "_a_id",
+  AKeyLabel: "_a_label",
+  AKeyLabelSearch: "_a_label_search",
+  extractTextFromHtml: value => value,
+  getTranslatedText: ({ placeholder }) => placeholder,
+  isArrayOfArrays: value => Array.isArray(value) && value.every(Array.isArray),
+  isPlaceholderTranslate: () => false,
+}));
+
+const createProps = ({
+  data,
+  isDataSimpleArray = false,
+  mergeData = false,
+}) => ({
+  alwaysTranslate: false,
+  data,
+  dataExtra: [],
+  isDataSimpleArray,
+  keyId: "id",
+  keyLabel: "label",
+  keyLabelCallback: undefined,
+  mergeData,
+  searchTextInHtml: false,
+  translateData: false,
+});
+
+const useDataAPI = props => {
+  let result;
+  const app = createApp(defineComponent({
+    name: "TestUiDataWithKeyIdAndLabelAPI",
+    setup() {
+      result = UiDataWithKeyIdAndLabelAPI(props);
+      return () => null;
+    },
+  }));
+
+  app.mount(document.createElement("div"));
+  return result;
+};
+
+describe("UiDataWithKeyIdAndLabelAPI", () => {
+  it("keeps replacing prop data with internally loaded data by default", () => {
+    const {
+      dataFromServer,
+      dataLocal,
+    } = useDataAPI(createProps({
+      data: [
+        { id: 1, label: "Prop one" },
+        { id: 3, label: "Prop three" },
+      ],
+    }));
+
+    dataFromServer.value = [
+      { id: 1, label: "Internal one" },
+      { id: 2, label: "Internal two" },
+    ];
+
+    expect(dataLocal.value.map(item => item[AKeyLabel])).toEqual([
+      "Internal one",
+      "Internal two",
+    ]);
+  });
+
+  it("merges prop and internally loaded data by ID with internal items taking precedence", () => {
+    const {
+      dataFromServer,
+      dataLocal,
+    } = useDataAPI(createProps({
+      data: [
+        { id: 1, label: "Prop one" },
+        { id: 3, label: "Prop three" },
+      ],
+      mergeData: true,
+    }));
+
+    dataFromServer.value = [
+      { id: 1, label: "Internal one" },
+      { id: 2, label: "Internal two" },
+    ];
+
+    expect(dataLocal.value.map(item => ({
+      id: item[AKeyId],
+      label: item[AKeyLabel],
+    }))).toEqual([
+      { id: 1, label: "Internal one" },
+      { id: 2, label: "Internal two" },
+      { id: 3, label: "Prop three" },
+    ]);
+  });
+
+  it("merges simple arrays by their values", () => {
+    const {
+      dataFromServer,
+      dataLocal,
+    } = useDataAPI(createProps({
+      data: ["one", "three"],
+      isDataSimpleArray: true,
+      mergeData: true,
+    }));
+
+    dataFromServer.value = ["one", "two"];
+
+    expect(dataLocal.value.map(item => item[AKeyId])).toEqual([
+      "one",
+      "two",
+      "three",
+    ]);
+  });
+});