aloha-vue 2.57.4 → 2.57.5

package/src/ALink/ALink.js

@@ -1,248 +1,253 @@
-import {
-  h,
-} from "vue";
-
-import AElement from "../AElement/AElement";
-
-import EmitsAPI from "../AButton/compositionAPI/EmitsAPI";
-
-import placements from "../const/placements";
-import {
-  isInteger,
-  isString,
-  uniqueId,
-} from "lodash-es";
-
-export default {
-  name: "ALink",
-  inheritAttrs: false,
-  props: {
-    alwaysTranslate: {
-      type: Boolean,
-      required: false,
-    },
-    ariaLabel: {
-      type: [String, Number, Object],
-      required: false,
-      default: undefined,
-    },
-    attributes: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-    class: {
-      type: [String, Object],
-      required: false,
-      default: undefined,
-    },
-    classDefault: {
-      type: String,
-      required: false,
-      default: "aloha_element",
-    },
-    classDefaultHidden: {
-      type: String,
-      required: false,
-      default: "aloha_element__hidden",
-    },
-    classDisabled: {
-      type: String,
-      required: false,
-      default: "disabled",
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: undefined,
-    },
-    excludeRenderAttributes: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-    extra: {
-      type: Object,
-      required: false,
-      default: undefined,
-    },
-    extraData: {
-      type: [String, Number, Boolean, Array, Object, Date, Function, Symbol, null, undefined],
-      required: false,
-      default: undefined,
-    },
-    href: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    html: {
-      type: [String, Number, Object, Array],
-      required: false,
-      default: undefined,
-    },
-    htmlScreenReader: {
-      type: [String, Number, Object, Array],
-      required: false,
-      default: undefined,
-    },
-    iconAttributes: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-    iconClass: {
-      type: [String, Object],
-      required: false,
-      default: undefined,
-    },
-    iconLeft: {
-      type: [String, Object],
-      required: false,
-      default: undefined,
-    },
-    iconRight: {
-      type: [String, Object],
-      required: false,
-      default: undefined,
-    },
-    iconTag: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    id: {
-      type: String,
-      required: false,
-      default: () => uniqueId("a_link_"),
-    },
-    isTitleHtml: {
-      type: Boolean,
-      required: false,
-      default: undefined,
-    },
-    loading: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    loadingAlign: {
-      type: String,
-      required: false,
-      default: "right",
-      validator: value => ["right", "left"].indexOf(value) !== -1,
-    },
-    loadingClass: {
-      type: [String, Object],
-      required: false,
-      default: "a_spinner_small",
-    },
-    safeHtml: {
-      type: [String, Number, Object, Array],
-      required: false,
-      default: undefined,
-    },
-    safeHtmlScreenReader: {
-      type: [String, Number, Object, Array],
-      required: false,
-      default: undefined,
-    },
-    stop: {
-      type: Boolean,
-      required: false,
-      default: undefined,
-    },
-    target: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    text: {
-      type: [String, Number, Object, Array],
-      required: false,
-      default: undefined,
-    },
-    textAfter: {
-      type: [String, Number, Object],
-      required: false,
-      default: undefined,
-    },
-    textAriaHidden: {
-      type: Boolean,
-      required: false,
-      default: undefined,
-    },
-    textBefore: {
-      type: [String, Number, Object],
-      required: false,
-      default: undefined,
-    },
-    textClass: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    textScreenReader: {
-      type: [String, Number, Object, Array],
-      required: false,
-      default: undefined,
-    },
-    textTag: {
-      type: String,
-      required: false,
-      default: "span",
-    },
-    title: {
-      type: [String, Number, Object, Array],
-      required: false,
-      default: undefined,
-    },
-    titleAttributes: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-    titlePlacement: {
-      type: String,
-      required: false,
-      default: "top",
-      validator: placement => placements.indexOf(placement) !== -1,
-    },
-    titleZIndex: {
-      type: [Number, String],
-      required: false,
-      default: "auto",
-      validator: value => {
-        if (isString(value)) {
-          return value === "auto";
-        }
-        return isInteger(value);
-      },
-    },
-    to: {
-      type: [Object, String],
-      required: false,
-      default: undefined,
-    },
-  },
-  emits: [
-    "click",
-  ],
-  setup(props, context) {
-    const {
-      clickEmit,
-    } = EmitsAPI(props, context);
-
-    return {
-      clickEmit,
-    };
-  },
-  render() {
-    return h(AElement, {
-      ...this.$attrs,
-      ...this.$props,
-      type: "link",
-      onClick: this.clickEmit,
-    }, this.$slots);
-  },
-};
+import {
+  h,
+} from "vue";
+
+import AElement from "../AElement/AElement";
+
+import EmitsAPI from "../AButton/compositionAPI/EmitsAPI";
+
+import placements from "../const/placements";
+import {
+  isInteger,
+  isString,
+  uniqueId,
+} from "lodash-es";
+
+export default {
+  name: "ALink",
+  inheritAttrs: false,
+  props: {
+    alwaysTranslate: {
+      type: Boolean,
+      required: false,
+    },
+    ariaLabel: {
+      type: [String, Number, Object],
+      required: false,
+      default: undefined,
+    },
+    attributes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    class: {
+      type: [String, Object],
+      required: false,
+      default: undefined,
+    },
+    classDefault: {
+      type: String,
+      required: false,
+      default: "aloha_element",
+    },
+    classDefaultHidden: {
+      type: String,
+      required: false,
+      default: "aloha_element__hidden",
+    },
+    classDisabled: {
+      type: String,
+      required: false,
+      default: "disabled",
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: undefined,
+    },
+    excludeRenderAttributes: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    extra: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    extraData: {
+      type: [String, Number, Boolean, Array, Object, Date, Function, Symbol, null, undefined],
+      required: false,
+      default: undefined,
+    },
+    href: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    html: {
+      type: [String, Number, Object, Array],
+      required: false,
+      default: undefined,
+    },
+    htmlScreenReader: {
+      type: [String, Number, Object, Array],
+      required: false,
+      default: undefined,
+    },
+    iconAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    iconClass: {
+      type: [String, Object],
+      required: false,
+      default: undefined,
+    },
+    iconLeft: {
+      type: [String, Object],
+      required: false,
+      default: undefined,
+    },
+    iconRight: {
+      type: [String, Object],
+      required: false,
+      default: undefined,
+    },
+    iconTag: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    id: {
+      type: String,
+      required: false,
+      default: () => uniqueId("a_link_"),
+    },
+    isTitleHtml: {
+      type: Boolean,
+      required: false,
+      default: undefined,
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    loadingAlign: {
+      type: String,
+      required: false,
+      default: "right",
+      validator: value => ["right", "left"].indexOf(value) !== -1,
+    },
+    loadingClass: {
+      type: [String, Object],
+      required: false,
+      default: "a_spinner_small",
+    },
+    preventKeyboardRepeat: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    safeHtml: {
+      type: [String, Number, Object, Array],
+      required: false,
+      default: undefined,
+    },
+    safeHtmlScreenReader: {
+      type: [String, Number, Object, Array],
+      required: false,
+      default: undefined,
+    },
+    stop: {
+      type: Boolean,
+      required: false,
+      default: undefined,
+    },
+    target: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    text: {
+      type: [String, Number, Object, Array],
+      required: false,
+      default: undefined,
+    },
+    textAfter: {
+      type: [String, Number, Object],
+      required: false,
+      default: undefined,
+    },
+    textAriaHidden: {
+      type: Boolean,
+      required: false,
+      default: undefined,
+    },
+    textBefore: {
+      type: [String, Number, Object],
+      required: false,
+      default: undefined,
+    },
+    textClass: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    textScreenReader: {
+      type: [String, Number, Object, Array],
+      required: false,
+      default: undefined,
+    },
+    textTag: {
+      type: String,
+      required: false,
+      default: "span",
+    },
+    title: {
+      type: [String, Number, Object, Array],
+      required: false,
+      default: undefined,
+    },
+    titleAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    titlePlacement: {
+      type: String,
+      required: false,
+      default: "top",
+      validator: placement => placements.indexOf(placement) !== -1,
+    },
+    titleZIndex: {
+      type: [Number, String],
+      required: false,
+      default: "auto",
+      validator: value => {
+        if (isString(value)) {
+          return value === "auto";
+        }
+        return isInteger(value);
+      },
+    },
+    to: {
+      type: [Object, String],
+      required: false,
+      default: undefined,
+    },
+  },
+  emits: [
+    "click",
+  ],
+  setup(props, context) {
+    const {
+      clickEmit,
+    } = EmitsAPI(props, context);
+
+    return {
+      clickEmit,
+    };
+  },
+  render() {
+    return h(AElement, {
+      ...this.$attrs,
+      ...this.$props,
+      type: "link",
+      onClick: this.clickEmit,
+    }, this.$slots);
+  },
+};

package/src/ATableForm/ATableForm.js

@@ -81,6 +81,11 @@ export default {
       required: false,
       default: undefined,
     },
+    focusAfterMove: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     icons: {
       type: Object,
       required: false,

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

@@ -12,6 +12,7 @@ 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");
@@ -40,8 +41,10 @@ export default function DeleteAPI(props, {
       headerText: texts.value.actionDeleteConfirmHeader,
       save: async() => {
         await onDeleteRow.value({
+          btnDeleteId: idBtnDelete.value,
           row: row.value,
           rowIndex: rowIndex.value,
+          rowId: id.value,
         });
         closeConfirm();
       },
@@ -63,8 +66,10 @@ export default function DeleteAPI(props, {
 
     if (isDeletable.value) {
       onDeleteRow.value({
+        btnDeleteId: idBtnDelete.value,
         row: row.value,
         rowIndex: rowIndex.value,
+        rowId: id.value,
       });
     }
   };

package/src/ATableForm/ATableFormCellDnd/ATableFormCellDnd.js

@@ -133,6 +133,7 @@ export default {
               class: "a_sr_only_focusable a_btn a_btn_transparent_dark a_table_form__reorder_button",
               disabled: this.isDndDisabled,
               iconLeft: ChevronUp,
+              preventKeyboardRepeat: true,
               tabindex: this.isDndDisabled ? -1 : undefined,
               title: this.texts.reorderUp,
               textScreenReader: this.texts.reorderUp,
@@ -163,6 +164,7 @@ export default {
               class: "a_sr_only_focusable a_btn a_btn_transparent_dark a_table_form__reorder_button",
               disabled: this.isDndDisabled,
               iconLeft: ChevronDown,
+              preventKeyboardRepeat: true,
               tabindex: this.isDndDisabled ? -1 : undefined,
               title: this.texts.reorderDown,
               textScreenReader: this.texts.reorderDown,

package/src/ATableForm/ATableFormTh/ATableFormTh.js

@@ -36,12 +36,6 @@ export default {
     };
   },
   render() {
-    const slotHeader = this.column.slotHeader;
-    const slotProps = {
-      column: this.column,
-      isEditable: this.isEditable,
-    };
-
     return h("th", {
       class: [
         "a_table_form__cell",

package/src/ATableForm/compositionAPI/ColumnsGrowAPI.js

@@ -14,6 +14,8 @@ import {
   isString,
 } from "lodash-es";
 
+const TABLE_WIDTH_SAFE_DELTA = 2;
+
 export default function ColumnsGrowAPI(props, {
   hasActionsColumn = computed(() => false),
   widthsLocal = computed(() => ({})),
@@ -106,7 +108,8 @@ export default function ColumnsGrowAPI(props, {
     }
 
     const columnsLocal = columns.value || [];
-    const tableWidthAvailable = tableWidth.value - actionsColumnWidth.value - dndColumnWidth.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;
 
     if (tableWidthAvailable <= 0) {
       columnsStylesGrow.value = {};

package/src/ATableForm/compositionAPI/DeleteAPI.js

@@ -1,6 +1,6 @@
 export default function DeleteAPI(props, { emit }) {
-  const onDeleteRow = ({ row, rowIndex }) => {
-    emit("deleteRow", { row, rowIndex });
+  const onDeleteRow = ({ row, rowIndex, rowId, btnDeleteId }) => {
+    emit("deleteRow", { row, rowIndex, rowId, btnDeleteId });
   };
 
   return {

package/src/ATableForm/compositionAPI/DragAndDropAPI.js

@@ -12,6 +12,7 @@ import {
 export default function DragAndDropAPI(props, { emit }, {
   isDndDisabled = computed(() => false),
 } = {}) {
+  const focusAfterMove = toRef(props, "focusAfterMove");
   const id = toRef(props, "id");
   const isDragAndDrop = toRef(props, "isDragAndDrop");
   const rows = toRef(props, "rows");
@@ -82,7 +83,7 @@ export default function DragAndDropAPI(props, { emit }, {
     };
   };
 
-  const moveRow = ({ fromIndex, toIndex, trigger }) => {
+  const moveRow = ({ focusId, fromIndex, toIndex, trigger }) => {
     if (!isDragAndDrop.value ||
       isDndDisabled.value ||
       fromIndex === toIndex ||
@@ -97,8 +98,9 @@ export default function DragAndDropAPI(props, { emit }, {
     const [movedRow] = ROWS_LOCAL.splice(fromIndex, 1);
     ROWS_LOCAL.splice(toIndex, 0, movedRow);
 
-    emit("updateRows", { rows: ROWS_LOCAL, trigger, fromIndex, toIndex });
+    emit("updateRows", { focusId, rows: ROWS_LOCAL, trigger, fromIndex, toIndex });
     emit("moveRow", {
+      focusId,
       fromIndex,
       row: movedRow,
       toIndex,
@@ -128,34 +130,42 @@ export default function DragAndDropAPI(props, { emit }, {
     });
   };
 
+  const setFocusAfterMoveLocal = ({ focusId }) => {
+    if (!focusAfterMove.value) {
+      return;
+    }
+
+    nextTick().then(
+      () => {
+        setFocusToElement({ selector: `#${ focusId }` });
+      },
+    );
+  };
+
   const moveRowUp = rowIndex => {
+    const focusIndex = Math.max(1, rowIndex - 1);
+    const focusId = `${ id.value }_${ focusIndex }_up`;
     moveRow({
+      focusId,
       fromIndex: rowIndex,
       toIndex: rowIndex - 1,
       trigger: "moveRowUp",
     });
 
-    nextTick().then(
-      () => {
-        const INDEX = Math.max(1, rowIndex - 1);
-        setFocusToElement({ selector: `#${ id.value }_${ INDEX }_up` });
-      },
-    );
+    setFocusAfterMoveLocal({ focusId });
   };
 
   const moveRowDown = rowIndex => {
+    const focusIndex = Math.min(rows.value.length - 2, rowIndex + 1);
+    const focusId = `${ id.value }_${ focusIndex }_down`;
     moveRow({
+      focusId,
       fromIndex: rowIndex,
       toIndex: rowIndex + 1,
       trigger: "moveRowDown",
     });
 
-    nextTick().then(
-      () => {
-        const INDEX = Math.min(rows.value.length - 2, rowIndex + 1);
-        setFocusToElement({ selector: `#${ id.value }_${ INDEX }_down` });
-      },
-    );
+    setFocusAfterMoveLocal({ focusId });
   };
 
   const onDragstart = ($event, rowIndex) => {