aloha-vue 2.63.0 → 2.64.0

package/package.json

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

@@ -10,6 +10,7 @@ import ReadonlyAPI from "./compositionAPI/ReadonlyAPI";
 import SlotAPI from "./compositionAPI/SlotAPI";
 import StylesAPI from "../compositionAPI/StylesAPI";
 
+import getFormElement from "../utils/getFormElement";
 import {
   get,
 } from "lodash-es";
@@ -44,6 +45,11 @@ export default {
       type: String,
       required: true,
     },
+    isCreateMode: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     isEditMode: {
       type: Boolean,
       required: false,
@@ -86,6 +92,20 @@ export default {
     "updateRowData",
   ],
   setup(props) {
+    const rowDataLocal = computed(() => {
+      return props.rowData || props.row;
+    });
+    const formElementLocal = computed(() => getFormElement({
+      column: props.column,
+      columnIndex: props.columnIndex,
+      isCreateMode: props.isCreateMode,
+      isEditMode: props.isEditMode,
+      row: props.row,
+      rowData: rowDataLocal.value,
+      rowIndex: props.rowIndex,
+      rows: props.rows,
+    }));
+
     const {
       columnStyles,
     } = StylesAPI({
@@ -94,11 +114,15 @@ export default {
 
     const {
       readonlyLocal,
-    } = ReadonlyAPI(props);
+    } = ReadonlyAPI(props, {
+      formElement: formElementLocal,
+    });
 
     const {
       disabledLocal,
-    } = DisabledAPI(props);
+    } = DisabledAPI(props, {
+      formElement: formElementLocal,
+    });
 
     const {
       hasSlot,
@@ -107,13 +131,10 @@ export default {
       slotNameAfter,
     } = SlotAPI(props);
 
-    const rowDataLocal = computed(() => {
-      return props.rowData || props.row;
-    });
-
     return {
       columnStyles,
       disabledLocal,
+      formElementLocal,
       hasSlot,
       hasSlotAfter,
       readonlyLocal,
@@ -137,7 +158,7 @@ export default {
     const {
       type = "text",
       ...formElement
-    } = this.column.formElement || {};
+    } = this.formElementLocal;
 
     const slotProps = {
       column: this.column,

package/src/ATableForm/ATableFormCell/compositionAPI/DisabledAPI.js

@@ -3,13 +3,16 @@ import {
   toRef,
 } from "vue";
 
-export default function DisabledAPI(props) {
+export default function DisabledAPI(props, {
+  formElement,
+} = {}) {
   const column = toRef(props, "column");
   const isEditable = toRef(props, "isEditable");
   const isEditMode = toRef(props, "isEditMode");
+  const formElementLocal = formElement || computed(() => column.value?.formElement);
 
   const disabledLocal = computed(() => {
-    return !!column.value?.formElement?.disabled ||
+    return !!formElementLocal.value?.disabled ||
       (isEditable.value &&
         !isEditMode.value);
   });

package/src/ATableForm/ATableFormCell/compositionAPI/ReadonlyAPI.js

@@ -3,21 +3,24 @@ import {
   toRef,
 } from "vue";
 
-export default function ReadonlyAPI(props) {
+export default function ReadonlyAPI(props, {
+  formElement,
+} = {}) {
   const column = toRef(props, "column");
   const isEditable = toRef(props, "isEditable");
   const isEditMode = toRef(props, "isEditMode");
   const isFooter = toRef(props, "isFooter");
+  const formElementLocal = formElement || computed(() => column.value?.formElement);
 
   const readonlyLocal = computed(() => {
     if (isFooter.value) {
       return true;
     }
     if (isEditable.value) {
-      if (column.value?.formElement?.useRowReadonly) {
+      if (formElementLocal.value?.useRowReadonly) {
         return !isEditMode.value;
       }
-      return !!column.value?.formElement?.readonly;
+      return !!formElementLocal.value?.readonly;
     }
     return true;
   });

package/src/ATableForm/ATableFormCellAction/ATableFormCellAction.js

@@ -210,38 +210,38 @@ export default {
           }, this.isActiveEditMode ?
             [
               h(AButton, {
-                id: this.idBtnCancel,
+                id: this.idBtnSave,
                 class: [
                   "a_table_form__action_button",
-                  this.actionsClasses.editCancel,
+                  this.actionsClasses.editSave,
                 ],
                 disabled: this.isSaving,
                 extra: this.extra,
-                iconLeft: XLg,
-                title: this.texts.actionEditCancel,
-                textScreenReader: this.texts.actionEditCancel,
-                onClick: () => this.onCancelEditRow({
+                iconLeft: Floppy2Fill,
+                title: this.texts.actionEditSave,
+                textScreenReader: this.texts.actionEditSave,
+                onClick: () => this.onSaveEditRow({
                   id: this.id,
                   row: this.row,
                   rowIndex: this.rowIndex,
-                  trigger: "cancel",
                 }),
               }),
               h(AButton, {
-                id: this.idBtnSave,
+                id: this.idBtnCancel,
                 class: [
                   "a_table_form__action_button",
-                  this.actionsClasses.editSave,
+                  this.actionsClasses.editCancel,
                 ],
                 disabled: this.isSaving,
                 extra: this.extra,
-                iconLeft: Floppy2Fill,
-                title: this.texts.actionEditSave,
-                textScreenReader: this.texts.actionEditSave,
-                onClick: () => this.onSaveEditRow({
+                iconLeft: XLg,
+                title: this.texts.actionEditCancel,
+                textScreenReader: this.texts.actionEditCancel,
+                onClick: () => this.onCancelEditRow({
                   id: this.id,
                   row: this.row,
                   rowIndex: this.rowIndex,
+                  trigger: "cancel",
                 }),
               }),
             ] :

package/src/ATableForm/ATableFormCellList/ATableFormCellList.js

@@ -1,122 +1,127 @@
-import {
-  computed,
-  h,
-} from "vue";
-
-import AForm from "../../ui/AForm/AForm";
-
-import DataAPI from "./compositionAPI/DataAPI";
-
-function hasItemWithId(items, id) {
-  return items?.some(item => {
-    return item?.id === id || hasItemWithId(item?.children, id);
-  }) || false;
-}
-
-export default {
-  name: "ATableFormCellList",
-  props: {
-    columns: {
-      type: Array,
-      required: true,
-    },
-    errors: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-    id: {
-      type: String,
-      required: true,
-    },
-    isEditable: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isEditMode: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isFooter: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    row: {
-      type: Object,
-      required: true,
-    },
-    rowData: {
-      type: Object,
-      required: false,
-      default: undefined,
-    },
-    rowIndex: {
-      type: Number,
-      required: true,
-    },
-    rows: {
-      type: Array,
-      required: true,
-    },
-  },
-  emits: [
-    "updateRowData",
-  ],
-  setup(props) {
-    const {
-      dataForm,
-    } = DataAPI(props);
-
-    return {
-      dataForm,
-      rowDataLocal: computed(() => props.rowData || props.row),
-    };
-  },
-  methods: {
-    updateRowData({
-      fullModel,
-      id,
-      item,
-      model,
-    }) {
-      const column = this.columns.find(columnLocal => {
-        return columnLocal.id === id ||
-          hasItemWithId(columnLocal.formElement?.children, id);
-      });
-
-      this.$emit("updateRowData", {
-        column,
-        columnId: id,
-        fullModel,
-        item,
-        model,
-      });
-    },
-  },
-  render() {
-    return h("td", {
-      class: [
-        "a_table_form__cell",
-        "a_table_form__cell_td",
-        "a_table_form__cell_list",
-      ],
-    }, [
-      h(AForm, {
-        data: this.dataForm,
-        errors: this.errors,
-        idPrefix: this.id,
-        modelValue: this.rowDataLocal,
-        readonly: this.isFooter || !this.isEditable,
-        showErrors: true,
-        showRequiredText: false,
-        tag: "div",
-        useFlatErrors: true,
-        useFlatModel: true,
-        onChange: this.updateRowData,
-      }, this.$slots),
-    ]);
-  },
-};
+import {
+  computed,
+  h,
+} from "vue";
+
+import AForm from "../../ui/AForm/AForm";
+
+import DataAPI from "./compositionAPI/DataAPI";
+
+function hasItemWithId(items, id) {
+  return items?.some(item => {
+    return item?.id === id || hasItemWithId(item?.children, id);
+  }) || false;
+}
+
+export default {
+  name: "ATableFormCellList",
+  props: {
+    columns: {
+      type: Array,
+      required: true,
+    },
+    errors: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+    isCreateMode: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isEditMode: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isEditable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isFooter: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    row: {
+      type: Object,
+      required: true,
+    },
+    rowData: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    rowIndex: {
+      type: Number,
+      required: true,
+    },
+    rows: {
+      type: Array,
+      required: true,
+    },
+  },
+  emits: [
+    "updateRowData",
+  ],
+  setup(props) {
+    const {
+      dataForm,
+    } = DataAPI(props);
+
+    return {
+      dataForm,
+      rowDataLocal: computed(() => props.rowData || props.row),
+    };
+  },
+  methods: {
+    updateRowData({
+      fullModel,
+      id,
+      item,
+      model,
+    }) {
+      const column = this.columns.find(columnLocal => {
+        return columnLocal.id === id ||
+          hasItemWithId(columnLocal.formElement?.children, id);
+      });
+
+      this.$emit("updateRowData", {
+        column,
+        columnId: id,
+        fullModel,
+        item,
+        model,
+      });
+    },
+  },
+  render() {
+    return h("td", {
+      class: [
+        "a_table_form__cell",
+        "a_table_form__cell_td",
+        "a_table_form__cell_list",
+      ],
+    }, [
+      h(AForm, {
+        data: this.dataForm,
+        errors: this.errors,
+        idPrefix: this.id,
+        modelValue: this.rowDataLocal,
+        readonly: this.isFooter || !this.isEditable,
+        showErrors: true,
+        showRequiredText: false,
+        tag: "div",
+        useFlatErrors: true,
+        useFlatModel: true,
+        onChange: this.updateRowData,
+      }, this.$slots),
+    ]);
+  },
+};

package/src/ATableForm/ATableFormCellList/compositionAPI/DataAPI.js

@@ -3,6 +3,7 @@ import {
   toRef,
 } from "vue";
 
+import getFormElement from "../../utils/getFormElement";
 import {
   cloneDeep,
   isNil,
@@ -33,14 +34,29 @@ function normalizeItem(item, {
 
 export default function DataAPI(props) {
   const columns = toRef(props, "columns");
+  const isCreateMode = toRef(props, "isCreateMode");
   const isEditable = toRef(props, "isEditable");
   const isEditMode = toRef(props, "isEditMode");
+  const row = toRef(props, "row");
+  const rowData = toRef(props, "rowData");
+  const rowIndex = toRef(props, "rowIndex");
+  const rows = toRef(props, "rows");
 
   const dataForm = computed(() => {
     const isRowDisabled = isEditable.value && !isEditMode.value;
 
-    return columns.value.map(column => {
-      const ITEM = normalizeItem(column.formElement, {
+    return columns.value.map((column, columnIndex) => {
+      const formElement = getFormElement({
+        column,
+        columnIndex,
+        isCreateMode: isCreateMode.value,
+        isEditMode: isEditMode.value,
+        row: row.value,
+        rowData: rowData.value || row.value,
+        rowIndex: rowIndex.value,
+        rows: rows.value,
+      });
+      const ITEM = normalizeItem(formElement, {
         isEditMode: isEditMode.value,
         isRowDisabled,
       });

package/src/ATableForm/ATableFormRow/ATableFormRow.js

@@ -184,16 +184,16 @@ export default {
       required: false,
       default: false,
     },
-    isDndDisabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isDndLocked: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
+    isDndDisabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isDndLocked: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     isDragAndDrop: {
       type: Boolean,
       required: false,
@@ -481,8 +481,8 @@ export default {
           canMoveRowDown: this.canMoveRowDown,
           canMoveRowUp: this.canMoveRowUp,
           isCreateMode: this.isCreateMode,
-          isDndDisabled: this.isDndDisabled,
-          isDndLocked: this.isDndLocked,
+          isDndDisabled: this.isDndDisabled,
+          isDndLocked: this.isDndLocked,
           isDragAndDrop: this.isDragAndDrop,
           isFooter: this.isFooter,
           isHeader: this.isHeader,
@@ -500,6 +500,7 @@ export default {
           id: this.idTr,
           columns: this.columns,
           errors: this.errorsLocal,
+          isCreateMode: this.isCreateMode,
           isEditable: this.isEditable,
           isEditMode: this.isActiveEditMode,
           isFooter: this.isFooter,
@@ -525,6 +526,7 @@ export default {
             columnStyle: this.columnsStylesGrow[column.id],
             errorIcon: this.errorIcon,
             errors: this.errorsLocal,
+            isCreateMode: this.isCreateMode,
             isEditable: this.isEditable,
             isEditMode: this.isActiveEditMode,
             isFooter: this.isFooter,