aloha-vue 2.57.7 → 2.57.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aloha-vue",
-  "version": "2.57.7",
+  "version": "2.57.8",
   "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/scss/components/ATableForm.scss

@@ -7,6 +7,8 @@
   --a_table_form_row_dragging_bg: #e9eef5;
   --a_table_form_row_dragging_opacity: .65;
   --a_table_form_row_dragging_outline: 2px dashed var(--a_color_gray_700);
+  --a_table_form_focus_color: var(--a_color_primary);
+  --a_table_form_focus_box_shadow: 0 0 0 2px var(--a_table_form_focus_color);
   --a_table_form_row_hover_bg: #eef6ff;
   --a_table_form_row_drag_bg: #dfefff;
   --a_table_form_footer_bg: var(--a_color_gray_100);
@@ -24,6 +26,12 @@
 
 .a_table_form__wrapper {
   overflow-x: auto;
+
+  &:has(> .a_table_form__table:focus) {
+    position: relative;
+    z-index: 3;
+    box-shadow: var(--a_table_form_focus_box_shadow);
+  }
 }
 
 .a_table_form__drag_preview {
@@ -68,7 +76,7 @@
   border-left: 1px solid var(--a_table_form_border_color);
 }
 
-.a_table_form__row > .a_table_form__cell:last-child {
+.a_table_form__row > .a_table_form__cell:last-child:not(.a_table_form__cell_actions_sticky) {
   border-right: 1px solid var(--a_table_form_border_color);
 }
 
@@ -120,6 +128,20 @@
 
 .a_table_form__row {
   position: relative;
+
+  &:focus {
+    z-index: 3;
+    box-shadow: var(--a_table_form_focus_box_shadow);
+
+    > .a_table_form__cell:first-child {
+      box-shadow: inset 1px 0 0 var(--a_table_form_focus_color);
+    }
+
+    > .a_table_form__cell_actions_sticky {
+      --a_table_form_cell_actions_edge_box_shadow:
+        inset -2px 0 0 var(--a_table_form_focus_color);
+    }
+  }
 }
 
 .a_table_form__row_drag_over .a_table_form__cell_td,
@@ -204,11 +226,15 @@
 }
 
 .a_table_form__cell_actions_sticky {
+  --a_table_form_cell_actions_edge_box_shadow:
+    inset -1px 0 0 var(--a_table_form_border_color);
+
   position: sticky;
   right: 0;
   z-index: 2;
   background: var(--a_table_form_bg);
   box-shadow:
+    var(--a_table_form_cell_actions_edge_box_shadow),
     inset 1px 0 0 rgba(0, 0, 0, .12),
     -8px 0 14px -8px rgba(17, 24, 39, .34),
     -18px 0 24px -20px rgba(17, 24, 39, .55);

package/src/ATableForm/ATableForm.js

@@ -198,6 +198,7 @@ export default {
 
     const {
       allColumnsLength,
+      columnsVisible,
       hasActionsColumn,
     } = ColumnsAPI(props);
 
@@ -228,6 +229,7 @@ export default {
       destroyColumnsGrowObserver,
       initColumnsGrowObserver,
     } = ColumnsGrowAPI(props, {
+      columnsVisible,
       hasActionsColumn,
       widthsLocal,
     });
@@ -251,6 +253,7 @@ export default {
       onCancelEditRow,
       onEditRow,
     } = EditAPI(props, {
+      columnsVisible,
       getRowKey,
     });
 
@@ -309,6 +312,7 @@ export default {
       canMoveRowUp,
       actionsClassesLocal,
       columnsStylesGrow,
+      columnsVisible,
       draggedRowIndex,
       dragOverPosition,
       dragOverRowIndex,
@@ -375,7 +379,7 @@ export default {
               canMoveRowUp: this.canMoveRowUp,
               cellTag: "th",
               changeModel: this.changeModel,
-              columns: this.columns,
+              columns: this.columnsVisible,
               columnsStylesGrow: this.columnsStylesGrow,
               draggedRowIndex: this.draggedRowIndex,
               extra: this.extra,
@@ -426,7 +430,7 @@ export default {
                   canMoveRowDown: this.canMoveRowDown,
                   canMoveRowUp: this.canMoveRowUp,
                   changeModel: this.changeModel,
-                  columns: this.columns,
+                  columns: this.columnsVisible,
                   columnsStylesGrow: this.columnsStylesGrow,
                   draggedRowIndex: this.draggedRowIndex,
                   editModel: this.activeEditRowKey === rowKey ? this.activeEditModel : undefined,
@@ -482,7 +486,7 @@ export default {
                 canMoveRowDown: this.canMoveRowDown,
                 canMoveRowUp: this.canMoveRowUp,
                 changeModel: this.changeModel,
-                columns: this.columns,
+                columns: this.columnsVisible,
                 columnsStylesGrow: this.columnsStylesGrow,
                 draggedRowIndex: this.draggedRowIndex,
                 editModel: this.activeEditModel,
@@ -545,7 +549,7 @@ export default {
               canMoveRowDown: this.canMoveRowDown,
               canMoveRowUp: this.canMoveRowUp,
               changeModel: this.changeModel,
-              columns: this.columns,
+              columns: this.columnsVisible,
               columnsStylesGrow: this.columnsStylesGrow,
               draggedRowIndex: this.draggedRowIndex,
               extra: this.extra,

package/src/ATableForm/compositionAPI/ColumnsAPI.js

@@ -15,8 +15,12 @@ export default function ColumnsAPI(props) {
     return !!(isEditable.value || isDeletable.value || isDeletableConfirm.value);
   });
 
+  const columnsVisible = computed(() => {
+    return columns.value.filter(column => column.isRender !== false);
+  });
+
   const allColumnsLength = computed(() => {
-    let length = columns.value?.length || 0;
+    let length = columnsVisible.value.length;
     if (isDragAndDrop.value) {
       length += 1;
     }
@@ -29,6 +33,7 @@ export default function ColumnsAPI(props) {
 
   return {
     allColumnsLength,
+    columnsVisible,
     hasActionsColumn,
   };
 }

package/src/ATableForm/compositionAPI/ColumnsGrowAPI.js

@@ -17,10 +17,10 @@ import {
 const TABLE_WIDTH_SAFE_DELTA = 2;
 
 export default function ColumnsGrowAPI(props, {
+  columnsVisible = computed(() => []),
   hasActionsColumn = computed(() => false),
   widthsLocal = computed(() => ({})),
 }) {
-  const columns = toRef(props, "columns");
   const id = toRef(props, "id");
   const isColumnsGrow = toRef(props, "isColumnsGrow");
   const isDeletable = toRef(props, "isDeletable");
@@ -107,7 +107,7 @@ export default function ColumnsGrowAPI(props, {
       return;
     }
 
-    const columnsLocal = columns.value || [];
+    const columnsLocal = columnsVisible.value || [];
     // Leave a small buffer to avoid subpixel overflow triggering a useless scrollbar.
     const tableWidthAvailable = tableWidth.value - actionsColumnWidth.value - dndColumnWidth.value - TABLE_WIDTH_SAFE_DELTA;
 
@@ -190,7 +190,7 @@ export default function ColumnsGrowAPI(props, {
   };
 
   watch([
-    columns,
+    columnsVisible,
     hasActionsColumn,
     isDeletable,
     isDeletableConfirm,

package/src/ATableForm/compositionAPI/EditAPI.js

@@ -13,10 +13,10 @@ import {
 } from "lodash-es";
 
 export default function EditAPI(props, {
+  columnsVisible = computed(() => []),
   getRowKey = () => {},
 }) {
   const addRow = toRef(props, "addRow");
-  const columns = toRef(props, "columns");
   const isAddable = toRef(props, "isAddable");
   const isEditable = toRef(props, "isEditable");
   const prepareEditModel = toRef(props, "prepareEditModel");
@@ -43,7 +43,7 @@ export default function EditAPI(props, {
       return false;
     }
 
-    return columns.value.some(column => {
+    return columnsVisible.value.some(column => {
       return !!column.formElement?.required;
     });
   });

package/src/utils/utilsDOM.js

@@ -46,12 +46,25 @@ export function setFocusToElement({ element, selector }) {
 
   const ELEMENT = element ? element : document.querySelector(selector);
   if (ELEMENT) {
-    if (!ELEMENT.hasAttribute("tabindex")) {
-      ELEMENT.setAttribute("tabindex", "-1");
-      ELEMENT.focus();
-      ELEMENT.removeAttribute("tabindex");
-    } else {
+    if (ELEMENT.matches(focusableSelector)) {
       ELEMENT.focus();
+
+      return;
+    }
+
+    const hasTabindex = ELEMENT.hasAttribute("tabindex");
+    const removeTemporaryTabindex = () => ELEMENT.removeAttribute("tabindex");
+    if (!hasTabindex) {
+      ELEMENT.setAttribute("tabindex", "-1");
+      ELEMENT.addEventListener("blur", removeTemporaryTabindex, { once: true });
+    }
+
+    ELEMENT.focus();
+
+    // For example disabled button
+    if (!hasTabindex && document.activeElement !== ELEMENT) {
+      ELEMENT.removeEventListener("blur", removeTemporaryTabindex);
+      removeTemporaryTabindex();
     }
   }
 }