aloha-vue 2.66.1 → 2.66.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aloha-vue",
-  "version": "2.66.1",
+  "version": "2.66.2",
   "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/ATable/ATable.js

@@ -1044,9 +1044,10 @@ export default {
                     level: 1,
                     row,
                     rowActionsClass: this.rowActionsClass,
-                    rowClass: this.rowClass,
-                    rowIndex,
-                    rowsLength: this.rowsLocal.length,
+                    rowClass: this.rowClass,
+                    rowIndex,
+                    rowIndexPath: `${ rowIndex }`,
+                    rowsLength: this.rowsLocal.length,
                     selectedRowsIndexes: this.selectedRowsIndexes,
                     onSetSelectedRowsIndexes: this.setSelectedRowsIndexes,
                   }, {
@@ -1094,9 +1095,10 @@ export default {
                   level: 1,
                   row,
                   rowActionsClass: this.rowActionsClass,
-                  rowClass: this.rowClass,
-                  rowIndex,
-                  rowsLength: this.rowsFooter.length,
+                  rowClass: this.rowClass,
+                  rowIndex,
+                  rowIndexPath: `${ rowIndex }`,
+                  rowsLength: this.rowsFooter.length,
                   selectedRowsIndexes: this.selectedRowsIndexes,
                   onSetSelectedRowsIndexes: this.setSelectedRowsIndexes,
                 }, {

package/src/ATable/ATableTdAction/ATableTdAction.js

@@ -52,10 +52,15 @@ export default {
       required: false,
       default: undefined,
     },
-    rowIndex: {
-      type: Number,
-      required: true,
-    },
+    rowIndex: {
+      type: Number,
+      required: true,
+    },
+    rowIndexPath: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
   },
   inject: [
     "columnActionsOnePlusDropdownOptions",

package/src/ATable/ATableTr/ATableTr.js

@@ -119,6 +119,11 @@ export default {
       type: Number,
       required: true,
     },
+    rowIndexPath: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
     rowsLength: {
       type: Number,
       required: true,
@@ -222,6 +227,7 @@ export default {
     "isMobile",
   ],
   render() {
+    const ROW_INDEX_PATH = this.rowIndexPath || `${ this.rowIndex }`;
     let tds = [];
     if (this.isMobile && !this.isAllColumnsVisibleMobile) {
       forEach(this.allVisibleMobileColumns, (column, columnIndex) => {
@@ -264,6 +270,7 @@ export default {
         disabledRowActions: this.disabledRowActions,
         row: this.row,
         rowIndex: this.rowIndex,
+        rowIndexPath: ROW_INDEX_PATH,
         isFooter: this.isFooter,
         rowActionsClass: this.rowActionsClass,
         isRowActionsStickyLocal: this.isRowActionsStickyLocal,
@@ -375,6 +382,7 @@ export default {
             rowActionsClass: this.rowActionsClass,
             rowClass: this.rowClass,
             rowIndex,
+            rowIndexPath: `${ ROW_INDEX_PATH }_${ rowIndex }`,
             rowsLength: this.children.length,
             selectedRowsIndexes: this.selectedRowsIndexes,
           }, {

package/src/ATable/ATableTr/compositionAPI/AttributesAPI.js

@@ -29,6 +29,7 @@ export default function AttributesAPI(props, {
   const row = toRef(props, "row");
   const rowClass = toRef(props, "rowClass");
   const rowIndex = toRef(props, "rowIndex");
+  const rowIndexPath = toRef(props, "rowIndexPath");
 
   const isMobile = inject("isMobile");
   const onTogglePreview = inject("onTogglePreview");
@@ -36,7 +37,8 @@ export default function AttributesAPI(props, {
 
   const rowHtmlId = computed(() => {
     const FOOTER_ID = isFooter.value ? "_footer" : "";
-    return `${ tableId.value }${ FOOTER_ID }_${ rowIndex.value }`;
+    const ROW_INDEX_PATH = rowIndexPath.value || rowIndex.value;
+    return `${ tableId.value }${ FOOTER_ID }_${ ROW_INDEX_PATH }`;
   });
 
   const rowClassLocal = computed(() => {

package/src/ATable/__tests__/ATable.RowIdsAPI.test.js

@@ -0,0 +1,66 @@
+import {
+  beforeAll,
+  describe,
+  expect,
+  it,
+} from "@jest/globals";
+
+import {
+  mockVueInject,
+} from "../../../utilsTests/utilsTests";
+
+describe("ATable row IDs", () => {
+  let AttributesAPI;
+  let RowActionsAPI;
+
+  beforeAll(async() => {
+    mockVueInject({
+      columnActionsOnePlusDropdownOptions: {},
+      rowActions: [],
+      tableId: "aloha",
+    });
+
+    AttributesAPI = (await import("../ATableTr/compositionAPI/AttributesAPI")).default;
+    RowActionsAPI = (await import("../compositionAPI/RowActionsAPI")).default;
+  });
+
+  it("uses the complete tree index path for a child row ID", () => {
+    const {
+      rowHtmlId,
+    } = AttributesAPI({
+      rowIndex: 1,
+      rowIndexPath: "0_1",
+    }, {});
+
+    expect(rowHtmlId.value).toBe("aloha_0_1");
+  });
+
+  it("uses the complete tree index path for a child actions ID", () => {
+    const {
+      buttonActionsId,
+    } = RowActionsAPI({
+      row: {},
+      rowIndex: 1,
+      rowIndexPath: "0_1",
+    });
+
+    expect(buttonActionsId.value).toBe("aloha_action_0_1");
+  });
+
+  it("keeps the existing ID format when no tree index path is provided", () => {
+    const {
+      rowHtmlId,
+    } = AttributesAPI({
+      rowIndex: 2,
+    }, {});
+    const {
+      buttonActionsId,
+    } = RowActionsAPI({
+      row: {},
+      rowIndex: 2,
+    });
+
+    expect(rowHtmlId.value).toBe("aloha_2");
+    expect(buttonActionsId.value).toBe("aloha_action_2");
+  });
+});

package/src/ATable/compositionAPI/RowActionsAPI.js

@@ -24,13 +24,15 @@ export default function RowActionsAPI(props) {
   const isFooter = toRef(props, "isFooter");
   const row = toRef(props, "row");
   const rowIndex = toRef(props, "rowIndex");
+  const rowIndexPath = toRef(props, "rowIndexPath");
 
   const columnActionsOnePlusDropdownOptions = inject("columnActionsOnePlusDropdownOptions");
   const rowActions = inject("rowActions");
   const tableId = inject("tableId");
 
   const buttonActionsId = computed(() => {
-    return `${ tableId.value }_action_${ rowIndex.value }`;
+    const ROW_INDEX_PATH = rowIndexPath.value || rowIndex.value;
+    return `${ tableId.value }_action_${ ROW_INDEX_PATH }`;
   });
 
   const indexFirstDropdownActionLocal = computed(() => {