aloha-vue 2.57.2 → 2.57.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aloha-vue",
-  "version": "2.57.2",
+  "version": "2.57.4",
   "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

@@ -215,7 +215,7 @@ export default {
     } = IconsAPI(props);
 
     const {
-      classesLocal,
+      actionsClassesLocal,
     } = ClassesAPI(props);
 
     const {
@@ -302,7 +302,7 @@ export default {
       canAddRow,
       canMoveRowDown,
       canMoveRowUp,
-      classesLocal,
+      actionsClassesLocal,
       columnsStylesGrow,
       draggedRowIndex,
       dragOverPosition,
@@ -361,22 +361,23 @@ export default {
           }, [
             h(ATableFormRow, {
               id: this.id,
+              actionsClasses: this.actionsClasses,
+              actionsDisabledCallback: this.actionsDisabledCallback,
+              actionsHideCallback: this.actionsHideCallback,
+              actionsTitleCallback: this.actionsTitleCallback,
               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,
+              extra: this.extra,
               hasActionsColumn: this.hasActionsColumn,
               hasActiveEditRow: false,
-              isActiveEditMode: false,
               isActionsSticky: this.isActionsSticky,
-              actionsDisabledCallback: this.actionsDisabledCallback,
-              actionsHideCallback: this.actionsHideCallback,
-              actionsTitleCallback: this.actionsTitleCallback,
+              isActiveEditMode: false,
               isDeletable: this.isDeletable,
               isDeletableConfirm: this.isDeletableConfirm,
               isDndDisabled: this.hasActiveEditRow,
@@ -395,8 +396,8 @@ export default {
               rows: this.rows,
               saveRow: this.saveRow,
               texts: this.textsLocal,
-              widths: this.widthsLocal,
               trClass: "a_table_form__row a_table_form__row_head",
+              widths: this.widthsLocal,
             }, this.$slots),
           ]),
           h("tbody", {
@@ -410,31 +411,32 @@ export default {
                 });
 
                 return h(ATableFormRow, {
+                  key: rowKey,
                   id: this.id,
+                  actionsClasses: this.actionsClassesLocal,
+                  actionsDisabledCallback: this.actionsDisabledCallback,
+                  actionsHideCallback: this.actionsHideCallback,
+                  actionsTitleCallback: this.actionsTitleCallback,
                   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,
                   errorIcon: this.errorIcon,
+                  extra: this.extra,
                   hasActionsColumn: this.hasActionsColumn,
                   hasActiveEditRow: this.hasActiveEditRow,
-                  isActiveEditMode: this.activeEditRowKey === rowKey,
                   isActionsSticky: this.isActionsSticky,
-                  actionsDisabledCallback: this.actionsDisabledCallback,
-                  actionsHideCallback: this.actionsHideCallback,
-                  actionsTitleCallback: this.actionsTitleCallback,
+                  isActiveEditMode: this.activeEditRowKey === rowKey,
                   isCreateMode: false,
                   isDeletable: this.isDeletable,
                   isDeletableConfirm: this.isDeletableConfirm,
                   isDndDisabled: this.hasActiveEditRow,
                   isDragAndDrop: this.isDragAndDrop,
                   isEditable: this.isEditable,
-                  key: rowKey,
                   moveRowDown: this.moveRowDown,
                   moveRowUp: this.moveRowUp,
                   onCancelEditRow: this.onCancelEditRow,
@@ -467,23 +469,24 @@ export default {
               }),
               this.isAddRowActive && h(ATableFormRow, {
                 id: this.id,
+                actionsClasses: this.actionsClassesLocal,
+                actionsDisabledCallback: this.actionsDisabledCallback,
+                actionsHideCallback: this.actionsHideCallback,
+                actionsTitleCallback: this.actionsTitleCallback,
                 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.activeEditModel,
                 errorIcon: this.errorIcon,
-                draggedRowIndex: this.draggedRowIndex,
+                extra: this.extra,
                 hasActionsColumn: this.hasActionsColumn,
                 hasActiveEditRow: this.hasActiveEditRow,
-                isActiveEditMode: true,
                 isActionsSticky: this.isActionsSticky,
-                actionsDisabledCallback: this.actionsDisabledCallback,
-                actionsHideCallback: this.actionsHideCallback,
-                actionsTitleCallback: this.actionsTitleCallback,
+                isActiveEditMode: true,
                 isCreateMode: true,
                 isDeletable: false,
                 isDeletableConfirm: false,
@@ -507,8 +510,8 @@ export default {
                 rows: this.rows,
                 saveRow: this.addRow,
                 texts: this.textsLocal,
-                widths: this.widthsLocal,
                 trClass: "a_table_form__row a_table_form__row_create",
+                widths: this.widthsLocal,
               }, this.$slots),
             ] :
             [h("tr", {
@@ -529,21 +532,22 @@ export default {
           }, this.rowsFooter.map((row, rowIndex) => {
             return h(ATableFormRow, {
               id: this.id,
+              actionsClasses: this.actionsClassesLocal,
+              actionsDisabledCallback: this.actionsDisabledCallback,
+              actionsHideCallback: this.actionsHideCallback,
+              actionsTitleCallback: this.actionsTitleCallback,
               allColumnsLength: this.allColumnsLength,
               canMoveRowDown: this.canMoveRowDown,
               canMoveRowUp: this.canMoveRowUp,
               changeModel: this.changeModel,
-              actionsClasses: this.actionsClasses,
               columns: this.columns,
               columnsStylesGrow: this.columnsStylesGrow,
               draggedRowIndex: this.draggedRowIndex,
+              extra: this.extra,
               hasActionsColumn: this.hasActionsColumn,
               hasActiveEditRow: this.hasActiveEditRow,
-              isActiveEditMode: false,
               isActionsSticky: this.isActionsSticky,
-              actionsDisabledCallback: this.actionsDisabledCallback,
-              actionsHideCallback: this.actionsHideCallback,
-              actionsTitleCallback: this.actionsTitleCallback,
+              isActiveEditMode: false,
               isDeletable: this.isDeletable,
               isDeletableConfirm: this.isDeletableConfirm,
               isDndDisabled: this.hasActiveEditRow,
@@ -578,7 +582,7 @@ export default {
         class: "a_mt_3 a_text_right",
       }, [
         h(AButton, {
-          class: this.classesLocal.addRow,
+          class: this.actionsClassesLocal.addRow,
           disabled: this.isAddDisabled,
           extra: this.extra,
           iconLeft: this.iconsLocal.actionAddRow,

package/src/ATableForm/ATableFormCellAction/ATableFormCellAction.js

@@ -8,6 +8,7 @@ import ATranslation from "../../ATranslation/ATranslation";
 import DeleteAPI from "./compositionAPI/DeleteAPI";
 import DisabledAPI from "./compositionAPI/DisabledAPI";
 import HiddenAPI from "./compositionAPI/HiddenAPI";
+import IdsAPI from "./compositionAPI/IdsAPI";
 import StylesAPI from "./compositionAPI/StylesAPI";
 import TitleAPI from "./compositionAPI/TitleAPI";
 
@@ -20,11 +21,6 @@ import XLg from "aloha-svg/dist/js/bootstrap/XLg";
 export default {
   name: "ATableFormCellAction",
   props: {
-    hasActiveEditRow: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
     actionsClasses: {
       type: Object,
       required: false,
@@ -45,16 +41,26 @@ export default {
       required: false,
       default: () => ({}),
     },
+    extra: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    hasActiveEditRow: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     id: {
       type: String,
       required: true,
     },
-    isActiveEditMode: {
+    isActionsSticky: {
       type: Boolean,
       required: false,
       default: false,
     },
-    isActionsSticky: {
+    isActiveEditMode: {
       type: Boolean,
       required: false,
       default: false,
@@ -136,9 +142,16 @@ export default {
     } = HiddenAPI(props);
 
     const {
+      idBtnCancel,
       idBtnDelete,
+      idBtnEdit,
+      idBtnSave,
+    } = IdsAPI(props);
+
+    const {
       onDeleteClick,
     } = DeleteAPI(props, {
+      idBtnDelete,
       isActionsDisabled: isDeleteDisabled,
     });
 
@@ -155,7 +168,10 @@ export default {
       columnStyles,
       deleteTitle,
       editTitle,
+      idBtnCancel,
       idBtnDelete,
+      idBtnEdit,
+      idBtnSave,
       isDeleteDisabled,
       isDeleteHidden,
       isEditDisabled,
@@ -194,29 +210,36 @@ export default {
           }, this.isActiveEditMode ?
             [
               h(AButton, {
+                id: this.idBtnCancel,
                 class: [
                   "a_table_form__action_button",
                   this.actionsClasses.editCancel,
                 ],
                 disabled: this.isSaving,
+                extra: this.extra,
                 iconLeft: XLg,
                 title: this.texts.actionEditCancel,
                 textScreenReader: this.texts.actionEditCancel,
                 onClick: () => this.onCancelEditRow({
+                  id: this.id,
                   row: this.row,
                   rowIndex: this.rowIndex,
+                  trigger: "cancel",
                 }),
               }),
               h(AButton, {
+                id: this.idBtnSave,
                 class: [
                   "a_table_form__action_button",
                   this.actionsClasses.editSave,
                 ],
                 disabled: this.isSaving,
+                extra: this.extra,
                 iconLeft: Floppy2Fill,
                 title: this.texts.actionEditSave,
                 textScreenReader: this.texts.actionEditSave,
                 onClick: () => this.onSaveEditRow({
+                  id: this.id,
                   row: this.row,
                   rowIndex: this.rowIndex,
                 }),
@@ -230,21 +253,25 @@ export default {
                   this.actionsClasses.delete,
                 ],
                 disabled: this.isDeleteDisabled,
+                extra: this.extra,
                 iconLeft: Trash,
                 title: this.deleteTitle,
                 textScreenReader: this.deleteTitle,
                 onClick: this.onDeleteClick,
               }),
               this.isEditable && !this.isEditHidden && h(AButton, {
+                id: this.idBtnEdit,
                 class: [
                   "a_table_form__action_button",
                   this.actionsClasses.edit,
                 ],
                 disabled: this.isEditDisabled,
+                extra: this.extra,
                 iconLeft: PencilFill,
                 title: this.editTitle,
                 textScreenReader: this.editTitle,
                 onClick: () => this.onEditRow({
+                  id: this.id,
                   row: this.row,
                   rowIndex: this.rowIndex,
                 }),

package/src/ATableForm/ATableFormCellAction/compositionAPI/DeleteAPI.js

@@ -9,9 +9,9 @@ import {
 } from "../../../index";
 
 export default function DeleteAPI(props, {
+  idBtnDelete = computed(() => ""),
   isActionsDisabled = computed(() => false),
 }) {
-  const id = toRef(props, "id");
   const isDeletable = toRef(props, "isDeletable");
   const isDeletableConfirm = toRef(props, "isDeletableConfirm");
   const onDeleteRow = toRef(props, "onDeleteRow");
@@ -24,10 +24,6 @@ export default function DeleteAPI(props, {
     openConfirm,
   } = AConfirmAPI();
 
-  const idBtnDelete = computed(() => {
-    return `${ id.value }_delete`;
-  });
-
   const closeConfirmLocal = () => {
     closeConfirm();
     nextTick().then(
@@ -74,7 +70,6 @@ export default function DeleteAPI(props, {
   };
 
   return {
-    idBtnDelete,
     onDeleteClick,
   };
 }

package/src/ATableForm/ATableFormCellAction/compositionAPI/IdsAPI.js

@@ -0,0 +1,31 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function IdsAPI(props) {
+  const id = toRef(props, "id");
+
+  const idBtnDelete = computed(() => {
+    return `${ id.value }_delete`;
+  });
+
+  const idBtnEdit = computed(() => {
+    return `${ id.value }_edit`;
+  });
+
+  const idBtnCancel = computed(() => {
+    return `${ id.value }_cancel`;
+  });
+
+  const idBtnSave = computed(() => {
+    return `${ id.value }_save`;
+  });
+
+  return {
+    idBtnCancel,
+    idBtnDelete,
+    idBtnEdit,
+    idBtnSave,
+  };
+}

package/src/ATableForm/ATableFormRow/ATableFormRow.js

@@ -30,6 +30,21 @@ export default {
       required: false,
       default: () => ({}),
     },
+    actionsDisabledCallback: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    actionsHideCallback: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    actionsTitleCallback: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
     allColumnsLength: {
       type: Number,
       required: true,
@@ -61,21 +76,6 @@ export default {
       required: false,
       default: () => ({}),
     },
-    actionsDisabledCallback: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-    actionsHideCallback: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-    actionsTitleCallback: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
     draggedRowIndex: {
       type: Number,
       required: false,
@@ -91,6 +91,11 @@ export default {
       required: false,
       default: undefined,
     },
+    extra: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
     hasActionsColumn: {
       type: Boolean,
       required: false,
@@ -105,12 +110,12 @@ export default {
       type: String,
       required: true,
     },
-    isActiveEditMode: {
+    isActionsSticky: {
       type: Boolean,
       required: false,
       default: false,
     },
-    isActionsSticky: {
+    isActiveEditMode: {
       type: Boolean,
       required: false,
       default: false,
@@ -386,13 +391,15 @@ export default {
       }),
       this.hasActionsColumn ?
         h(ATableFormCellAction, {
+          id: this.idTr,
           actionsClasses: this.actionsClasses,
           actionsDisabledCallback: this.actionsDisabledCallback,
           actionsHideCallback: this.actionsHideCallback,
-          id: this.idTr,
+          actionsTitleCallback: this.actionsTitleCallback,
+          extra: this.extra,
           hasActiveEditRow: this.hasActiveEditRow,
-          isActiveEditMode: this.isActiveEditMode,
           isActionsSticky: this.isActionsSticky,
+          isActiveEditMode: this.isActiveEditMode,
           isDeletable: this.isDeletable,
           isDeletableConfirm: this.isDeletableConfirm,
           isEditable: this.isEditable,
@@ -406,7 +413,6 @@ export default {
           row: this.row,
           rowIndex: this.rowIndex,
           texts: this.texts,
-          actionsTitleCallback: this.actionsTitleCallback,
           widths: this.widths,
         }) :
         null,

package/src/ATableForm/ATableFormRow/compositionAPI/EditAPI.js

@@ -5,7 +5,6 @@ import {
 
 import {
   cloneDeep,
-  isPlainObject,
   set,
   unset,
 } from "lodash-es";
@@ -51,14 +50,16 @@ export default function EditAPI(props, {
     unset(errorsLocal.value, columnId);
   };
 
-  const cancelEditRow = () => {
+  const cancelEditRow = ({ trigger, id } = {}) => {
     onCancelEditRow.value({
       row: row.value,
       rowIndex: rowIndex.value,
+      trigger,
+      id,
     });
   };
 
-  const saveEditRow = async() => {
+  const saveEditRow = async({ id } = {}) => {
     if (isSaving.value) {
       return;
     }
@@ -79,7 +80,7 @@ export default function EditAPI(props, {
         return;
       }
 
-      cancelEditRow();
+      cancelEditRow({ trigger: "save", id });
     } catch (error) {
       errorsLocal.value = error;
     } finally {

package/src/ATableForm/compositionAPI/ClassesAPI.js

@@ -1,23 +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,
-  };
-}
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function ClassesAPI(props) {
+  const actionsClasses = toRef(props, "actionsClasses");
+
+  const actionsClassesLocal = 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",
+      ...actionsClasses.value,
+    };
+  });
+
+  return {
+    actionsClassesLocal,
+  };
+}