aloha-vue 2.72.0 → 2.74.0

package/package.json

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

@@ -567,9 +567,10 @@ export default {
     const {
       columnsOrderedFromSimpleTable,
       renderedGroupedColumns,
-    } = ColumnsGroupedAPI(props, {
-      modelSort: modelSortLocal,
-    });
+    } = ColumnsGroupedAPI(props, {
+      modelSort: modelSortLocal,
+      slots: context.slots,
+    });
 
     const {
       columnIdsGroupByLocked,
@@ -995,7 +996,7 @@ export default {
             onSetSelectedRowsIndexes: this.setSelectedRowsIndexes,
             columnsForRender: this.renderedGroupedColumns,
           }) :
-          h(ATableHeader, {
+          h(ATableHeader, {
             areAllRowsSelected: this.areAllRowsSelected,
             areAllVisibleRowsSelected: this.areAllVisibleRowsSelected,
             areSomeRowsSelected: this.areSomeRowsSelected,
@@ -1008,8 +1009,8 @@ export default {
             rowsLocalLength: this.rowsLocalLength,
             showFirstSortingSequenceNumber: this.showFirstSortingSequenceNumber,
             sortingSequenceNumberClass: this.sortingSequenceNumberClass,
-            onSetSelectedRowsIndexes: this.setSelectedRowsIndexes,
-          }),
+            onSetSelectedRowsIndexes: this.setSelectedRowsIndexes,
+          }, this.$slots),
           h("div", {
             class: "a_table__loading",
           }, [

package/src/ATable/ATableHeader/ATableHeader.js

@@ -165,7 +165,7 @@ export default {
             onDragenterParent: this.dragenter,
             onDragleaveParent: this.dragleave,
             onDragendParent: this.dragend,
-          });
+          }, this.$slots);
         }),
         this.isActionColumnVisible && h(ATableHeaderThAction, {
           disabledOptions: this.disabledOptions,

package/src/ATable/ATableHeaderTh/ATableHeaderTh.js

@@ -154,13 +154,18 @@ export default {
           textScreenReader: this.column.textScreenReader || undefined,
           ...this.attributesForButtonSort,
         }, () => [
-          this.column.label && h(ATranslation, {
-            html: this.column.label,
-            tag: "span",
-            extra: this.column.extra,
-            class: "a_table__th__text aloha_element__ml_0",
-            ariaHidden: !!this.column.textScreenReader,
-          }),
+          (this.column.headerSlot && this.$slots[this.column.headerSlot]) ?
+            this.$slots[this.column.headerSlot]({
+              column: this.column,
+              columnIndex: this.columnIndex,
+            }) :
+            this.column.label && h(ATranslation, {
+              html: this.column.label,
+              tag: "span",
+              extra: this.column.extra,
+              class: "a_table__th__text aloha_element__ml_0",
+              ariaHidden: !!this.column.textScreenReader,
+            }),
           this.isSortable && h("span", {
             class: "a_table__th__sort__box aloha_element__ml_0",
           }, [

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

@@ -0,0 +1,97 @@
+import {
+  h,
+  ref,
+} from "vue";
+import {
+  describe,
+  expect,
+  it,
+  jest,
+} from "@jest/globals";
+import {
+  mount,
+} from "@vue/test-utils";
+
+import ATableHeaderTh from "../ATableHeaderTh/ATableHeaderTh";
+
+jest.mock("../../AButton/AButton", () => ({
+  name: "AButton",
+  render() {
+    return jest.requireActual("vue").h("span", this.$slots.default?.());
+  },
+}));
+jest.mock("aloha-svg/dist/js/bootstrap/CaretDownFill", () => "");
+jest.mock("aloha-svg/dist/js/bootstrap/CaretUpFill", () => "");
+
+const ATranslationStub = {
+  name: "ATranslation",
+  props: {
+    html: {
+      type: [String, Number, Object, Array],
+      default: undefined,
+    },
+    text: {
+      type: [String, Number, Object, Array],
+      default: undefined,
+    },
+  },
+  render() {
+    return h("span", this.html || this.text);
+  },
+};
+
+const mountHeader = ({ column, slots }) => mount(ATableHeaderTh, {
+  props: {
+    column,
+    columnIndex: 2,
+    hasMultipleActions: false,
+  },
+  slots,
+  global: {
+    provide: {
+      changeModelSort: () => {},
+      columnWidthDefault: ref(250),
+      isColumnsDnd: ref(false),
+      isLoadingOptions: ref(false),
+      isLoadingTable: ref(false),
+      tableId: ref("table"),
+      useRem: ref(false),
+    },
+    stubs: {
+      ATranslation: ATranslationStub,
+    },
+  },
+});
+
+describe("ATable header slot", () => {
+  it("renders the configured header slot instead of the label", () => {
+    const wrapper = mountHeader({
+      column: {
+        id: "name",
+        label: "Name label",
+        headerSlot: "nameHeader",
+      },
+      slots: {
+        nameHeader: ({ column, columnIndex }) => h(
+          "strong",
+          { class: "custom-header" },
+          `${ column.id }-${ columnIndex }`,
+        ),
+      },
+    });
+
+    expect(wrapper.find(".custom-header").text()).toBe("name-2");
+    expect(wrapper.text()).not.toContain("Name label");
+  });
+
+  it("renders the label when the configured header slot is not provided", () => {
+    const wrapper = mountHeader({
+      column: {
+        label: "Name label",
+        headerSlot: "nameHeader",
+      },
+    });
+
+    expect(wrapper.text()).toContain("Name label");
+  });
+});

package/src/ATable/compositionAPI/ColumnsGroupedAPI.js

@@ -24,9 +24,10 @@ import {
   uniqBy,
 } from "lodash-es";
 
-export default function ColumnsGroupedAPI(props, {
-  modelSort = ref([]),
-}) {
+export default function ColumnsGroupedAPI(props, {
+  modelSort = ref([]),
+  slots = {},
+}) {
   const columns = toRef(props, "columns");
   const showFirstSortingSequenceNumber = toRef(props, "showFirstSortingSequenceNumber");
   const sortingSequenceNumberClass = toRef(props, "sortingSequenceNumberClass");
@@ -133,7 +134,7 @@ export default function ColumnsGroupedAPI(props, {
   });
 
   const getColumnsForRender = col => {
-    return h(ATableHeaderTh, {
+    return h(ATableHeaderTh, {
       ref: "th",
       class: "a_table__cell__child_group",
       column: col,
@@ -142,8 +143,8 @@ export default function ColumnsGroupedAPI(props, {
       hasMultipleActions: false,
       modelSort: modelSort.value,
       showFirstSortingSequenceNumber: showFirstSortingSequenceNumber.value,
-      sortingSequenceNumberClass: sortingSequenceNumberClass.value,
-    });
+      sortingSequenceNumberClass: sortingSequenceNumberClass.value,
+    }, slots);
   };
   const getRecursiveGroupForRender = group => {
     return h("div", {

package/src/ui/AFieldset/AFieldset.js

@@ -1,4 +1,5 @@
 import {
+  Fragment,
   h,
   resolveComponent,
 } from "vue";
@@ -363,10 +364,6 @@ export default {
           } else if (item.classColumn) {
             classColumn = item.classColumn;
           }
-          let style;
-          if (item.isHide) {
-            style = "display: none;";
-          }
           const COMPONENT = this.componentTypesMapping()[item.type];
           const ERRORS = this.useFlatErrors ?
             get(this.errorsAll, item.id) :
@@ -394,21 +391,20 @@ export default {
             });
           }
 
-          return h("div", {
+          return h(Fragment, {
             key,
-            class: classColumn,
-            style,
           }, [
             h(COMPONENT, {
               alwaysTranslate: this.alwaysTranslate,
               modelValue: MODEL_VALUE,
               modelAll: IS_CONTAINER ? this.modelAll : undefined,
-              modelDependencies: IS_CONTAINER ? this.modelValue : undefined,
+              modelDependencies: this.modelValue,
               errors: ERRORS,
               errorsAll: IS_CONTAINER ? this.errorsAll : undefined,
               parentId,
               idPrefix: this.idPrefix,
               onUpdateData: ({ dataKeyByKeyId }) => this.onUpdateDataLocal({ item, dataKeyByKeyId }),
+              class: classColumn,
               ...item,
               change: ({ currentModel, id, item: _item, model, props, fullModel }) => this.onUpdateModelLocal({
                 currentModel, id, item: _item, model, props, component: item, fullModel,

package/src/ui/AFieldset/__tests__/AFieldset.ClassColumn.test.js

@@ -0,0 +1,114 @@
+import {
+  h,
+} from "vue";
+import {
+  afterEach,
+  describe,
+  expect,
+  it,
+  jest,
+} from "@jest/globals";
+import {
+  mount,
+} from "@vue/test-utils";
+
+import AFieldset from "../AFieldset";
+import {
+  AFormPluginOptions,
+} from "../../../plugins/AFormPlugin";
+
+jest.mock("../../../index", () => {
+  const {
+    computed,
+    h: hLocal,
+    ref,
+  } = require("vue");
+  const {
+    AFormPluginOptions: pluginOptions,
+  } = require("../../../plugins/AFormPlugin");
+
+  const componentStub = {
+    render() {
+      return hLocal("div");
+    },
+  };
+
+  return {
+    AElement: componentStub,
+    AErrorsText: componentStub,
+    AFormHelpText: componentStub,
+    AFormLabelDescription: componentStub,
+    AFormPluginOptions: pluginOptions,
+    AFormReadonly: componentStub,
+    AGroup: componentStub,
+    AUiTypes_typesContainer: ref({}),
+    UiAPI: props => ({
+      ariaDescribedbyLocal: computed(() => undefined),
+      errorsId: computed(() => `${ props.id }_errors`),
+      helpTextId: computed(() => `${ props.id }_help`),
+      htmlIdLocal: computed(() => props.htmlId || props.id),
+      isErrors: computed(() => false),
+      labelDescriptionId: computed(() => `${ props.id }_description`),
+    }),
+    UiCollapseAPI: () => ({
+      iconCollapse: computed(() => undefined),
+      initIsCollapsedLocal: () => {},
+      isCollapsedLocal: ref(false),
+      titleCollapse: computed(() => undefined),
+      toggleCollapse: () => {},
+    }),
+    UIExcludeRenderAttributesAPI: () => ({
+      attributesToExcludeFromRender: computed(() => ({})),
+    }),
+    UiStyleHideAPI: () => ({
+      componentStyleHide: computed(() => ""),
+    }),
+    UiTextAfterLabelAPI: () => ({
+      textAfterLabel: computed(() => ""),
+    }),
+  };
+});
+
+jest.mock("../../AUiComponents", () => ({
+  __esModule: true,
+  default: {},
+}));
+
+const COMPONENTS_ORIGINAL = AFormPluginOptions.components;
+
+afterEach(() => {
+  AFormPluginOptions.components = COMPONENTS_ORIGINAL;
+});
+
+describe("AFieldset classColumn", () => {
+  it("applies classColumn to the child component without a wrapper element", () => {
+    AFormPluginOptions.components = {
+      testColumn: {
+        inheritAttrs: false,
+        render() {
+          return h("section", {
+            ...this.$attrs,
+            "data-testid": "child",
+          });
+        },
+      },
+    };
+
+    const wrapper = mount(AFieldset, {
+      props: {
+        children: [{
+          classColumn: "test_column",
+          id: "child",
+          type: "testColumn",
+        }],
+        modelValue: {},
+      },
+    });
+
+    const content = wrapper.get(".a_fieldset__content");
+    const child = content.get("[data-testid='child']");
+
+    expect(child.classes()).toContain("test_column");
+    expect(child.element.parentElement).toBe(content.element);
+  });
+});

package/src/ui/AForm/AForm.js

@@ -90,16 +90,16 @@ export default {
       required: false,
       default: "",
     },
-    showErrors: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    showRequiredText: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
+    showErrors: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    showRequiredText: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     tag: {
       type: String,
       required: false,
@@ -182,10 +182,10 @@ export default {
         this.$slots.formPrepend() :
         "",
 
-      this.showRequiredText && this.isRequiredLocal ?
-        h(ARequired, {
-          text: this.textRequired,
-        }) :
+      this.showRequiredText && this.isRequiredLocal ?
+        h(ARequired, {
+          text: this.textRequired,
+        }) :
         "",
       this.$slots.formPrependAfterRequired ?
         this.$slots.formPrependAfterRequired() :
@@ -235,7 +235,7 @@ export default {
             alwaysTranslate: this.alwaysTranslate,
             modelValue: MODEL_VALUE,
             modelAll: IS_CONTAINER ? this.modelValueLocal : undefined,
-            modelDependencies: IS_CONTAINER ? this.modelValueLocal : undefined,
+            modelDependencies: this.modelValueLocal,
             class: classColumn,
             errors: this.errors[item.id],
             errorsAll: IS_CONTAINER ? this.errors : undefined,

package/src/ui/AGroup/AGroup.js

@@ -385,7 +385,7 @@ export default {
                 alwaysTranslate: this.alwaysTranslate,
                 modelAll: IS_CONTAINER ? this.modelAll : undefined,
                 modelValue: MODEL_VALUE,
-                modelDependencies: IS_CONTAINER ? this.modelValue : undefined,
+                modelDependencies: this.modelValue,
                 errors: ERRORS,
                 errorsAll: IS_CONTAINER ? this.errorsAll : undefined,
                 parentId,