aloha-vue 2.57.0 → 2.57.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aloha-vue",
-  "version": "2.57.0",
+  "version": "2.57.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/ATableForm/ATableForm.js

@@ -11,6 +11,7 @@ import ARequired from "../ui/ARequired/ARequired";
 import ATableFormRow from "./ATableFormRow/ATableFormRow";
 import ATranslation from "../ATranslation/ATranslation";
 
+import ClassesAPI from "./compositionAPI/ClassesAPI";
 import ColumnsAPI from "./compositionAPI/ColumnsAPI";
 import ColumnsGrowAPI from "./compositionAPI/ColumnsGrowAPI";
 import DeleteAPI from "./compositionAPI/DeleteAPI";
@@ -31,6 +32,11 @@ import {
 export default {
   name: "ATableForm",
   props: {
+    actionsClasses: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
     actionsDisabledCallback: {
       type: Object,
       required: false,
@@ -55,21 +61,21 @@ export default {
       type: Array,
       required: true,
     },
-    columnsDefaultValue: {
-      type: [String, Number],
-      required: false,
-      default: "",
-    },
-    changeModel: {
-      type: Function,
-      required: false,
-      default: undefined,
-    },
-    errorIcon: {
-      type: String,
-      required: false,
-      default: ExclamationCircleFill,
-    },
+    columnsDefaultValue: {
+      type: [String, Number],
+      required: false,
+      default: "",
+    },
+    changeModel: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
+    errorIcon: {
+      type: String,
+      required: false,
+      default: ExclamationCircleFill,
+    },
     extra: {
       type: Object,
       required: false,
@@ -140,20 +146,20 @@ export default {
       required: false,
       default: "h2",
     },
-    prepareEditModel: {
-      type: Function,
-      required: false,
-      default: undefined,
-    },
-    rowClass: {
-      type: [String, Object, Array, Function],
-      required: false,
-      default: undefined,
-    },
-    rows: {
-      type: Array,
-      required: false,
-      default: () => [],
+    prepareEditModel: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
+    rowClass: {
+      type: [String, Object, Array, Function],
+      required: false,
+      default: undefined,
+    },
+    rows: {
+      type: Array,
+      required: false,
+      default: () => [],
     },
     rowsFooter: {
       type: Array,
@@ -208,6 +214,10 @@ export default {
       iconsLocal,
     } = IconsAPI(props);
 
+    const {
+      classesLocal,
+    } = ClassesAPI(props);
+
     const {
       columnsStylesGrow,
       destroyColumnsGrowObserver,
@@ -292,6 +302,7 @@ export default {
       canAddRow,
       canMoveRowDown,
       canMoveRowUp,
+      classesLocal,
       columnsStylesGrow,
       draggedRowIndex,
       dragOverPosition,
@@ -348,14 +359,15 @@ export default {
           h("thead", {
             class: "a_table_form__head",
           }, [
-            h(ATableFormRow, {
-              id: this.id,
-              allColumnsLength: this.allColumnsLength,
-              canMoveRowDown: this.canMoveRowDown,
-              canMoveRowUp: this.canMoveRowUp,
-              cellTag: "th",
-              changeModel: this.changeModel,
-              columns: this.columns,
+            h(ATableFormRow, {
+              id: this.id,
+              allColumnsLength: this.allColumnsLength,
+              canMoveRowDown: this.canMoveRowDown,
+              canMoveRowUp: this.canMoveRowUp,
+              cellTag: "th",
+              changeModel: this.changeModel,
+              actionsClasses: this.actionsClasses,
+              columns: this.columns,
               columnsStylesGrow: this.columnsStylesGrow,
               draggedRowIndex: this.draggedRowIndex,
               hasActionsColumn: this.hasActionsColumn,
@@ -397,13 +409,14 @@ export default {
                   rowIndex,
                 });
 
-                return h(ATableFormRow, {
-                  id: this.id,
-                  allColumnsLength: this.allColumnsLength,
-                  canMoveRowDown: this.canMoveRowDown,
-                  canMoveRowUp: this.canMoveRowUp,
-                  changeModel: this.changeModel,
-                  columns: this.columns,
+                return h(ATableFormRow, {
+                  id: this.id,
+                  allColumnsLength: this.allColumnsLength,
+                  canMoveRowDown: this.canMoveRowDown,
+                  canMoveRowUp: this.canMoveRowUp,
+                  changeModel: this.changeModel,
+                  actionsClasses: this.actionsClasses,
+                  columns: this.columns,
                   columnsStylesGrow: this.columnsStylesGrow,
                   draggedRowIndex: this.draggedRowIndex,
                   editModel: this.activeEditRowKey === rowKey ? this.activeEditModel : undefined,
@@ -431,13 +444,13 @@ export default {
                   onDragover: this.onDragover,
                   onDragstart: this.onDragstart,
                   onDrop: this.onDrop,
-                  onEditRow: this.onEditRow,
-                  row,
-                  rowClass: this.rowClass,
-                  rowIndex,
-                  rows: this.rows,
-                  saveRow: this.saveRow,
-                  texts: this.textsLocal,
+                  onEditRow: this.onEditRow,
+                  row,
+                  rowClass: this.rowClass,
+                  rowIndex,
+                  rows: this.rows,
+                  saveRow: this.saveRow,
+                  texts: this.textsLocal,
                   widths: this.widthsLocal,
                   trClass: [
                     "a_table_form__row",
@@ -452,13 +465,14 @@ export default {
                   ],
                 }, this.$slots);
               }),
-              this.isAddRowActive && h(ATableFormRow, {
-                id: this.id,
-                allColumnsLength: this.allColumnsLength,
-                canMoveRowDown: this.canMoveRowDown,
-                canMoveRowUp: this.canMoveRowUp,
-                changeModel: this.changeModel,
-                columns: this.columns,
+              this.isAddRowActive && h(ATableFormRow, {
+                id: this.id,
+                allColumnsLength: this.allColumnsLength,
+                canMoveRowDown: this.canMoveRowDown,
+                canMoveRowUp: this.canMoveRowUp,
+                changeModel: this.changeModel,
+                actionsClasses: this.actionsClasses,
+                columns: this.columns,
                 columnsStylesGrow: this.columnsStylesGrow,
                 editModel: this.activeEditModel,
                 errorIcon: this.errorIcon,
@@ -486,13 +500,13 @@ export default {
                 onDragover: this.onDragover,
                 onDragstart: this.onDragstart,
                 onDrop: this.onDrop,
-                onEditRow: this.onEditRow,
-                row: {},
-                rowClass: this.rowClass,
-                rowIndex: this.rows.length,
-                rows: this.rows,
-                saveRow: this.addRow,
-                texts: this.textsLocal,
+                onEditRow: this.onEditRow,
+                row: {},
+                rowClass: this.rowClass,
+                rowIndex: this.rows.length,
+                rows: this.rows,
+                saveRow: this.addRow,
+                texts: this.textsLocal,
                 widths: this.widthsLocal,
                 trClass: "a_table_form__row a_table_form__row_create",
               }, this.$slots),
@@ -513,13 +527,14 @@ export default {
           this.hasRowsFooter && h("tfoot", {
             class: "a_table_form__foot",
           }, this.rowsFooter.map((row, rowIndex) => {
-            return h(ATableFormRow, {
-              id: this.id,
-              allColumnsLength: this.allColumnsLength,
-              canMoveRowDown: this.canMoveRowDown,
-              canMoveRowUp: this.canMoveRowUp,
-              changeModel: this.changeModel,
-              columns: this.columns,
+            return h(ATableFormRow, {
+              id: this.id,
+              allColumnsLength: this.allColumnsLength,
+              canMoveRowDown: this.canMoveRowDown,
+              canMoveRowUp: this.canMoveRowUp,
+              changeModel: this.changeModel,
+              actionsClasses: this.actionsClasses,
+              columns: this.columns,
               columnsStylesGrow: this.columnsStylesGrow,
               draggedRowIndex: this.draggedRowIndex,
               hasActionsColumn: this.hasActionsColumn,
@@ -546,13 +561,13 @@ export default {
               onDeleteRow: this.onDeleteRow,
               onDragend: this.onDragend,
               onDragstart: this.onDragstart,
-              onEditRow: this.onEditRow,
-              row,
-              rowClass: this.rowClass,
-              rowIndex,
-              rows: this.rowsFooter,
-              saveRow: this.saveRow,
-              texts: this.textsLocal,
+              onEditRow: this.onEditRow,
+              row,
+              rowClass: this.rowClass,
+              rowIndex,
+              rows: this.rowsFooter,
+              saveRow: this.saveRow,
+              texts: this.textsLocal,
               widths: this.widthsLocal,
               trClass: "a_table_form__row a_table_form__row_footer",
             }, this.$slots);
@@ -563,7 +578,7 @@ export default {
         class: "a_mt_3 a_text_right",
       }, [
         h(AButton, {
-          class: "a_btn a_btn_outline_primary",
+          class: this.classesLocal.addRow,
           disabled: this.isAddDisabled,
           extra: this.extra,
           iconLeft: this.iconsLocal.actionAddRow,

package/src/ATableForm/ATableFormCellAction/ATableFormCellAction.js

@@ -25,6 +25,11 @@ export default {
       required: false,
       default: false,
     },
+    actionsClasses: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
     actionsDisabledCallback: {
       type: Object,
       required: false,
@@ -189,7 +194,10 @@ export default {
           }, this.isActiveEditMode ?
             [
               h(AButton, {
-                class: "a_btn a_btn_transparent_primary a_table_form__action_button",
+                class: [
+                  "a_table_form__action_button",
+                  this.actionsClasses.editCancel,
+                ],
                 disabled: this.isSaving,
                 iconLeft: XLg,
                 title: this.texts.actionEditCancel,
@@ -200,7 +208,10 @@ export default {
                 }),
               }),
               h(AButton, {
-                class: "a_btn a_btn_transparent_primary a_table_form__action_button",
+                class: [
+                  "a_table_form__action_button",
+                  this.actionsClasses.editSave,
+                ],
                 disabled: this.isSaving,
                 iconLeft: Floppy2Fill,
                 title: this.texts.actionEditSave,
@@ -214,7 +225,10 @@ export default {
             [
               (this.isDeletable || this.isDeletableConfirm) && !this.isDeleteHidden && h(AButton, {
                 id: this.idBtnDelete,
-                class: "a_btn a_btn_transparent_danger a_table_form__action_button",
+                class: [
+                  "a_table_form__action_button",
+                  this.actionsClasses.delete,
+                ],
                 disabled: this.isDeleteDisabled,
                 iconLeft: Trash,
                 title: this.deleteTitle,
@@ -222,7 +236,10 @@ export default {
                 onClick: this.onDeleteClick,
               }),
               this.isEditable && !this.isEditHidden && h(AButton, {
-                class: "a_btn a_btn_transparent_primary a_table_form__action_button",
+                class: [
+                  "a_table_form__action_button",
+                  this.actionsClasses.edit,
+                ],
                 disabled: this.isEditDisabled,
                 iconLeft: PencilFill,
                 title: this.editTitle,

package/src/ATableForm/ATableFormRow/ATableFormRow.js

@@ -25,6 +25,11 @@ import {
 export default {
   name: "ATableFormRow",
   props: {
+    actionsClasses: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
     allColumnsLength: {
       type: Number,
       required: true,
@@ -37,20 +42,20 @@ export default {
       type: Function,
       required: true,
     },
-    cellTag: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    changeModel: {
-      type: Function,
-      required: false,
-      default: undefined,
-    },
-    columns: {
-      type: Array,
-      required: true,
-    },
+    cellTag: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    changeModel: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
+    columns: {
+      type: Array,
+      required: true,
+    },
     columnsStylesGrow: {
       type: Object,
       required: false,
@@ -353,13 +358,13 @@ export default {
         }) :
         null,
       ...this.columns.map((column, columnIndex) => {
-        if (this.isHeader) {
-          return h(ATableFormTh, {
-            column,
-            columnStyle: this.columnsStylesGrow[column.id],
-            isEditable: this.isEditable,
-          }, this.$slots);
-        }
+        if (this.isHeader) {
+          return h(ATableFormTh, {
+            column,
+            columnStyle: this.columnsStylesGrow[column.id],
+            isEditable: this.isEditable,
+          }, this.$slots);
+        }
 
         return h(ATableFormCell, {
           id: this.idTr,
@@ -381,6 +386,7 @@ export default {
       }),
       this.hasActionsColumn ?
         h(ATableFormCellAction, {
+          actionsClasses: this.actionsClasses,
           actionsDisabledCallback: this.actionsDisabledCallback,
           actionsHideCallback: this.actionsHideCallback,
           id: this.idTr,

package/src/ATableForm/compositionAPI/ClassesAPI.js

@@ -0,0 +1,23 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function ClassesAPI(props) {
+  const classes = toRef(props, "actionsClasses");
+
+  const classesLocal = computed(() => {
+    return {
+      delete: "a_btn a_btn_transparent_danger",
+      edit: "a_btn a_btn_transparent_primary",
+      editCancel: "a_btn a_btn_transparent_primary",
+      editSave: "a_btn a_btn_transparent_primary",
+      addRow: "a_btn a_btn_outline_primary",
+      ...classes.value,
+    };
+  });
+
+  return {
+    classesLocal,
+  };
+}