aloha-vue 2.58.0 → 2.59.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aloha-vue",
-  "version": "2.58.0",
+  "version": "2.59.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/plugins/AMultiselectOrderedPlugin.js

@@ -64,6 +64,7 @@ export const AMultiselectOrderedPluginOptions = {
       ...AMultiselectOrderedPluginTexts,
     },
     translateData: false,
+    translateGroup: false,
   },
 };
 

package/src/plugins/ASelectPlugin.js

@@ -38,10 +38,11 @@ export const ASelectPluginOptions = {
     slotName: undefined,
     sortOrder: undefined,
     sortOrderGroup: undefined,
-    textDeselectAll: "_A_SELECT_DESELECT_ALL_",
-    textSelectAll: "_A_SELECT_SELECT_ALL_",
-    translateData: false,
-    type: "select",
+    textDeselectAll: "_A_SELECT_DESELECT_ALL_",
+    textSelectAll: "_A_SELECT_SELECT_ALL_",
+    translateData: false,
+    translateGroup: false,
+    type: "select",
   },
 };
 

package/src/ui/ACheckbox/ACheckbox.js

@@ -343,11 +343,16 @@ export default {
         search: "_A_CHECKBOX_SEARCH_",
       }),
     },
-    translateData: {
-      type: Boolean,
-      required: false,
-      default: undefined,
-    },
+    translateData: {
+      type: Boolean,
+      required: false,
+      default: undefined,
+    },
+    translateGroup: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     url: {
       type: String,
       required: false,

package/src/ui/AMultiselectOrdered/AMultiselectOrdered.js

@@ -438,11 +438,16 @@ export default {
       required: false,
       default: () => AMultiselectOrderedPluginOptions.propsDefault.texts,
     },
-    translateData: {
-      type: Boolean,
-      required: false,
-      default: () => AMultiselectOrderedPluginOptions.propsDefault.translateData,
-    },
+    translateData: {
+      type: Boolean,
+      required: false,
+      default: () => AMultiselectOrderedPluginOptions.propsDefault.translateData,
+    },
+    translateGroup: {
+      type: Boolean,
+      required: false,
+      default: () => AMultiselectOrderedPluginOptions.propsDefault.translateGroup,
+    },
     url: {
       type: String,
       required: false,
@@ -919,8 +924,9 @@ export default {
               searchTimeout: this.searchTimeout,
               searchTextInHtml: this.searchTextInHtml,
               selectMenuClass: this.selectMenuClass,
-              slotName: this.slotName,
-              type: "multiselect",
+              slotName: this.slotName,
+              translateGroup: this.translateGroup,
+              type: "multiselect",
             }, this.$slots),
           ]),
         ]),

package/src/ui/ARadio/ARadio.js

@@ -354,11 +354,16 @@ export default {
         search: "_A_RADIO_SEARCH_",
       }),
     },
-    translateData: {
-      type: Boolean,
-      required: false,
-      default: undefined,
-    },
+    translateData: {
+      type: Boolean,
+      required: false,
+      default: undefined,
+    },
+    translateGroup: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     url: {
       type: String,
       required: false,

package/src/ui/ASelect/ASelect.js

@@ -477,11 +477,16 @@ export default {
       required: false,
       default: () => ASelectPluginOptions.propsDefault.textSelectAll,
     },
-    translateData: {
-      type: Boolean,
-      required: false,
-      default: () => ASelectPluginOptions.propsDefault.translateData,
-    },
+    translateData: {
+      type: Boolean,
+      required: false,
+      default: () => ASelectPluginOptions.propsDefault.translateData,
+    },
+    translateGroup: {
+      type: Boolean,
+      required: false,
+      default: () => ASelectPluginOptions.propsDefault.translateGroup,
+    },
     type: {
       type: String,
       required: false,
@@ -1064,9 +1069,10 @@ export default {
                             keyGroupLabelCallback: this.keyGroupLabelCallback,
                             labelNotFound: this.labelNotFound,
                             showNotFound: this.showNotFound,
-                            mode: this.mode,
-                            slotName: this.slotName,
-                            onChangeModelValue: this.onChangeModelValue,
+                            mode: this.mode,
+                            slotName: this.slotName,
+                            translateGroup: this.translateGroup,
+                            onChangeModelValue: this.onChangeModelValue,
                           }, this.$slots);
                         }),
                         this.isModelLengthLimitExceeded && h(ASelectValueCloseable, {
@@ -1076,9 +1082,10 @@ export default {
                           disabled: this.disabledLocal,
                           keyGroup: this.keyGroup,
                           keyGroupLabelCallback: this.keyGroupLabelCallback,
-                          mode: this.mode,
-                          hideDeleteButton: !this.exceededItemsDeletable,
-                          onChangeModelValue: this.deleteExceededItems,
+                          mode: this.mode,
+                          hideDeleteButton: !this.exceededItemsDeletable,
+                          translateGroup: this.translateGroup,
+                          onChangeModelValue: this.deleteExceededItems,
                         }),
                       ]) :
                       h("span", {

package/src/ui/ASelect/ASelectValueCloseable/ASelectValueCloseable.js

@@ -63,6 +63,11 @@ export default {
       required: false,
       default: undefined,
     },
+    translateGroup: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   emits: [
     "changeModelValue",

package/src/ui/ASelect/ASelectValueCloseable/compositionAPI/GroupAPI.js

@@ -3,15 +3,22 @@ import {
   toRef,
 } from "vue";
 
+import {
+  getTranslatedText,
+  isPlaceholderTranslate,
+} from "../../../../ATranslation/compositionAPI/UtilsAPI";
+
 import {
   get,
 } from "lodash-es";
 
 export default function GroupAPI(props) {
+  const alwaysTranslate = toRef(props, "alwaysTranslate");
   const data = toRef(props, "data");
   const keyGroup = toRef(props, "keyGroup");
   const keyGroupLabelCallback = toRef(props, "keyGroupLabelCallback");
   const mode = toRef(props, "mode");
+  const translateGroup = toRef(props, "translateGroup");
 
   const groupLabel = computed(() => {
     if (!mode.value === "one_per_group" || !keyGroup.value) {
@@ -22,11 +29,19 @@ export default function GroupAPI(props) {
       return undefined;
     }
 
+    let groupLabel = groupKey;
     if (keyGroupLabelCallback.value) {
-      return keyGroupLabelCallback.value({ item: data.value, inDropdown: false, group: groupKey });
+      groupLabel = keyGroupLabelCallback.value({ item: data.value, inDropdown: false, group: groupKey });
+    }
+
+    if (translateGroup.value && isPlaceholderTranslate(groupLabel)) {
+      return getTranslatedText({
+        placeholder: groupLabel,
+        alwaysTranslate: alwaysTranslate.value,
+      });
     }
 
-    return groupKey;
+    return groupLabel;
   });
 
   return {

package/src/ui/ASelect/compositionAPI/SelectedTitleAPI.js

@@ -3,6 +3,11 @@ import {
   toRef,
 } from "vue";
 
+import {
+  getTranslatedText,
+  isPlaceholderTranslate,
+} from "../../../ATranslation/compositionAPI/UtilsAPI";
+
 import {
   AKeyLabel,
 } from "../../../const/AKeys";
@@ -21,12 +26,14 @@ export default function SelectedTitleAPI(props, {
   modelValueLength,
   modelValueMultiselectFiltered = computed(() => []),
 }) {
+  const alwaysTranslate = toRef(props, "alwaysTranslate");
   const isSelectionCloseable = toRef(props, "isSelectionCloseable");
   const keyGroup = toRef(props, "keyGroup");
   const keyGroupLabelCallback = toRef(props, "keyGroupLabelCallback");
   const keyTitle = toRef(props, "keyTitle");
   const keyTitleCallback = toRef(props, "keyTitleCallback");
   const modelValue = toRef(props, "modelValue");
+  const translateGroup = toRef(props, "translateGroup");
 
   const getTitleForItem = ({ item, _isModeOnePerGroup }) => {
     if (isFunction(keyTitleCallback.value)) {
@@ -40,11 +47,19 @@ export default function SelectedTitleAPI(props, {
     if (_isModeOnePerGroup) {
       const groupKey = get(item, keyGroup.value);
       if (groupKey) {
+        let groupLabel = groupKey;
         if (isFunction(keyGroupLabelCallback.value)) {
-          return `${ keyGroupLabelCallback.value({ item, inDropdown: false, group: groupKey }) }: ${ item[AKeyLabel] }`;
+          groupLabel = keyGroupLabelCallback.value({ item, inDropdown: false, group: groupKey });
+        }
+
+        if (translateGroup.value && isPlaceholderTranslate(groupLabel)) {
+          groupLabel = getTranslatedText({
+            placeholder: groupLabel,
+            alwaysTranslate: alwaysTranslate.value,
+          });
         }
 
-        return `${ groupKey }: ${ item[AKeyLabel] }`;
+        return `${ groupLabel }: ${ item[AKeyLabel] }`;
       }
     }
 

package/src/ui/ASelectIcon/ASelectIcon.js

@@ -325,12 +325,17 @@ export default {
       required: false,
       default: () => ASelectPluginOptions.propsDefault.textDeselectAll,
     },
-    textSelectAll: {
-      type: String,
-      required: false,
-      default: () => ASelectPluginOptions.propsDefault.textSelectAll,
-    },
-    type: {
+    textSelectAll: {
+      type: String,
+      required: false,
+      default: () => ASelectPluginOptions.propsDefault.textSelectAll,
+    },
+    translateGroup: {
+      type: Boolean,
+      required: false,
+      default: () => ASelectPluginOptions.propsDefault.translateGroup,
+    },
+    type: {
       type: String,
       required: false,
       default: () => ASelectPluginOptions.propsDefault.type,

package/src/ui/ASelectStyle/ASelectStyle.js

@@ -329,12 +329,17 @@ export default {
       required: false,
       default: () => ASelectPluginOptions.propsDefault.textDeselectAll,
     },
-    textSelectAll: {
-      type: String,
-      required: false,
-      default: () => ASelectPluginOptions.propsDefault.textSelectAll,
-    },
-    type: {
+    textSelectAll: {
+      type: String,
+      required: false,
+      default: () => ASelectPluginOptions.propsDefault.textSelectAll,
+    },
+    translateGroup: {
+      type: Boolean,
+      required: false,
+      default: () => ASelectPluginOptions.propsDefault.translateGroup,
+    },
+    type: {
       type: String,
       required: false,
       default: () => ASelectPluginOptions.propsDefault.type,

package/src/ui/compositionApi/UIDataGroupAPI.js

@@ -1,34 +1,41 @@
-import {
-  computed,
-  toRef,
-} from "vue";
-
-import {
-  aOrderBy,
-  extractTextFromHtml,
-} from "../../utils/utils";
-
-import {
-  AKeyId,
-} from "../../const/AKeys";
-import {
-  cloneDeep,
-  forEach,
-  get,
-  isArray,
-  isFunction,
-  isNil,
-  isString,
-  values,
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import {
+  aOrderBy,
+  extractTextFromHtml,
+} from "../../utils/utils";
+
+import {
+  getTranslatedText,
+  isPlaceholderTranslate,
+} from "../../ATranslation/compositionAPI/UtilsAPI";
+
+import {
+  AKeyId,
+} from "../../const/AKeys";
+import {
+  cloneDeep,
+  forEach,
+  get,
+  isArray,
+  isFunction,
+  isNil,
+  isString,
+  values,
 } from "lodash-es";
 
-export default function UIDataGroupAPI(props, {
-  data = computed(() => []),
-}) {
-  const keyGroup = toRef(props, "keyGroup");
-  const keyGroupLabelCallback = toRef(props, "keyGroupLabelCallback");
-  const searchTextInHtml = toRef(props, "searchTextInHtml");
-  const sortOrderGroup = toRef(props, "sortOrderGroup");
+export default function UIDataGroupAPI(props, {
+  data = computed(() => []),
+}) {
+  const alwaysTranslate = toRef(props, "alwaysTranslate");
+  const keyGroup = toRef(props, "keyGroup");
+  const keyGroupLabelCallback = toRef(props, "keyGroupLabelCallback");
+  const searchTextInHtml = toRef(props, "searchTextInHtml");
+  const sortOrderGroup = toRef(props, "sortOrderGroup");
+  const translateGroup = toRef(props, "translateGroup");
 
   const keyGroupArray = computed(() => {
     if (isArray(keyGroup.value)) {
@@ -65,21 +72,27 @@ export default function UIDataGroupAPI(props, {
         }
         allGroupKeys += `${ allGroupKeys ? "_" : "" }${ group }`;
         if (!GROUPS_FOR_LEVER[leverIndex][allGroupKeys]) {
-          const GROUP_LABEL = isFunction(keyGroupLabelCallback.value) ?
-            keyGroupLabelCallback.value({ group: group, item }) :
-            group;
-          GROUPS_FOR_LEVER[leverIndex][allGroupKeys] = {
-            groupKey: group,
-            groupLabel: GROUP_LABEL,
+          let groupLabel = isFunction(keyGroupLabelCallback.value) ?
+            keyGroupLabelCallback.value({ group: group, item }) :
+            group;
+          if (translateGroup.value && isPlaceholderTranslate(groupLabel)) {
+            groupLabel = getTranslatedText({
+              placeholder: groupLabel,
+              alwaysTranslate: alwaysTranslate.value,
+            });
+          }
+          GROUPS_FOR_LEVER[leverIndex][allGroupKeys] = {
+            groupKey: group,
+            groupLabel,
             groupParentKey: groupParentKey,
             allGroupKeys: allGroupKeys,
             allParentKeys: cloneDeep(allParentKeys),
             data: [],
             dataKeyByKeyId: {},
-          };
-          if (searchTextInHtml.value) {
-            GROUPS_FOR_LEVER[leverIndex][allGroupKeys].groupLabelSearch = extractTextFromHtml(GROUP_LABEL);
-          }
+          };
+          if (searchTextInHtml.value) {
+            GROUPS_FOR_LEVER[leverIndex][allGroupKeys].groupLabelSearch = extractTextFromHtml(groupLabel);
+          }
         }
         GROUPS_FOR_LEVER[leverIndex][allGroupKeys].data.push(item);
         GROUPS_FOR_LEVER[leverIndex][allGroupKeys].dataKeyByKeyId[item[AKeyId]] = item;

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

@@ -0,0 +1,106 @@
+import {
+  computed,
+  nextTick,
+} from "vue";
+import {
+  beforeAll,
+  describe,
+  expect,
+  it,
+} from "@jest/globals";
+
+import UIDataGroupAPI from "../UIDataGroupAPI";
+import {
+  setI18n,
+  setLanguage,
+} from "../../../ATranslation/compositionAPI/ATranslationAPI";
+
+import {
+  AKeyId,
+} from "../../../const/AKeys";
+
+describe("UIDataGroupAPI", () => {
+  beforeAll(async() => {
+    setI18n({
+      uiDataGroupApiTest: {
+        _GROUP_: "Translated group",
+        _GROUP_FROM_CALLBACK_: "Translated callback group",
+      },
+    });
+    setLanguage("uiDataGroupApiTest");
+    await nextTick();
+  });
+
+  it("translates a group label without changing its key", () => {
+    const props = {
+      alwaysTranslate: true,
+      keyGroup: "group",
+      keyGroupLabelCallback: undefined,
+      searchTextInHtml: false,
+      sortOrderGroup: undefined,
+      translateGroup: true,
+    };
+    const data = computed(() => [{
+      [AKeyId]: "item_1",
+      group: "_GROUP_",
+    }]);
+
+    const {
+      groupsForLever,
+    } = UIDataGroupAPI(props, {
+      data,
+    });
+
+    expect(groupsForLever.value[0][0]).toEqual(expect.objectContaining({
+      allGroupKeys: "_GROUP_",
+      groupKey: "_GROUP_",
+      groupLabel: "Translated group",
+    }));
+  });
+
+  it("does not translate a group label when translateGroup is false", () => {
+    const props = {
+      alwaysTranslate: true,
+      keyGroup: "group",
+      keyGroupLabelCallback: undefined,
+      searchTextInHtml: false,
+      sortOrderGroup: undefined,
+      translateGroup: false,
+    };
+    const data = computed(() => [{
+      [AKeyId]: "item_1",
+      group: "_GROUP_",
+    }]);
+
+    const {
+      groupsForLever,
+    } = UIDataGroupAPI(props, {
+      data,
+    });
+
+    expect(groupsForLever.value[0][0].groupLabel).toBe("_GROUP_");
+  });
+
+  it("translates a group label returned by keyGroupLabelCallback", () => {
+    const props = {
+      alwaysTranslate: true,
+      keyGroup: "group",
+      keyGroupLabelCallback: () => "_GROUP_FROM_CALLBACK_",
+      searchTextInHtml: false,
+      sortOrderGroup: undefined,
+      translateGroup: true,
+    };
+    const data = computed(() => [{
+      [AKeyId]: "item_1",
+      group: "group_1",
+    }]);
+
+    const {
+      groupsForLever,
+    } = UIDataGroupAPI(props, {
+      data,
+    });
+
+    expect(groupsForLever.value[0][0].groupLabel).toBe("Translated callback group");
+  });
+});