aloha-vue 1.2.181 → 1.2.183

package/package.json

@@ -14,7 +14,7 @@
     "Vue.js"
   ],
   "homepage": "https://github.com/ilia-brykin/aloha/#README.md",
-  "version": "1.2.181",
+  "version": "1.2.183",
   "author": {
     "name": "Ilia Brykin",
     "email": "brykin.ilia@gmail.com"

package/src/ATable/ATablePreviewDown/ATablePreviewDown.js

@@ -3,8 +3,8 @@ import {
 } from "vue";
 
 import AButton from "../../AButton/AButton";
+import ATranslation from "../../ATranslation/ATranslation";
 
-import AriaLabelAPI from "./compositionAPI/AriaLabelAPI";
 import FocusAPI from "./compositionAPI/FocusAPI";
 
 export default {
@@ -23,10 +23,6 @@ export default {
     "onTogglePreview",
   ],
   setup() {
-    const {
-      previewAriaLabel,
-    } = AriaLabelAPI();
-
     const {
       componentRef,
       setFocusToComponent,
@@ -38,7 +34,6 @@ export default {
 
     return {
       componentRef,
-      previewAriaLabel,
     };
   },
   render() {
@@ -46,8 +41,11 @@ export default {
       ref: "componentRef",
       class: "a_table__preview_down",
       tabindex: -1,
-      "aria-label": this.previewAriaLabel,
     }, [
+      h(ATranslation, {
+        class: "a_sr_only",
+        text: "_A_TABLE_PREVIEW_DOWN_ARIA_LABEL_",
+      }),
       this.$slots.preview && this.$slots.preview({
         row: this.row,
         rowIndex: this.rowIndex,

package/src/ATable/ATablePreviewRight/ATablePreviewRight.js

@@ -1,257 +1,254 @@
-import {
-  h,
-  onBeforeUnmount,
-  onMounted, toRef,
-} from "vue";
-
-import AButton from "../../AButton/AButton";
-import ACloak from "../../ACloak/ACloak";
-import AModal from "../../AModal/AModal";
-import AResizer from "../../AResizer/AResizer";
-import ATranslation from "../../ATranslation/ATranslation";
-
-import AriaLabelAPI from "./compositionAPI/AriaLabelAPI";
-import ArrowsAPI from "./compositionAPI/ArrowsAPI";
-import IdAPI from "./compositionAPI/IdAPI";
-import MouseEventsAPI from "./compositionAPI/MouseEventsAPI";
-import PreviewRightRewAPI from "../compositionAPI/PreviewRightRewAPI";
-import RowAPI from "./compositionAPI/RowAPI";
-
-export default {
-  name: "ATablePreviewRight",
-  props: {
-    countAllRows: {
-      type: Number,
-      required: true,
-    },
-    disabledPreviewRowCallback: {
-      type: Function,
-      required: false,
-      default: () => {},
-    },
-    isLoadingTable: {
-      type: Boolean,
-      required: false,
-    },
-    isMobile: {
-      type: Boolean,
-      required: false,
-    },
-    limitPagination: {
-      type: Number,
-      required: false,
-      default: undefined,
-    },
-    offsetPagination: {
-      type: Number,
-      required: false,
-      default: undefined,
-    },
-    previewHeaderTag: {
-      type: String,
-      required: true,
-    },
-    previewStyles: {
-      type: [String, Object],
-      required: false,
-      default: undefined,
-    },
-    rowIndex: {
-      type: Number,
-      required: true,
-    },
-    rows: {
-      type: Array,
-      required: true,
-    },
-    usePagination: {
-      type: Boolean,
-      required: false,
-    },
-  },
-  emits: [
-    "closePreview",
-    "mousedownResizePreviewRight",
-    "mousemoveResizePreviewRight",
-    "mouseupResizePreviewRight",
-    "togglePreviewResize",
-    "togglePreview",
-    "update:offset",
-  ],
-  inject: [
-    "isLoadingOptions",
-  ],
-  setup(props, context) {
-    const isMobile = toRef(props, "isMobile");
-
-    const {
-      previewRef,
-    } = PreviewRightRewAPI();
-
-    const {
-      idLocal,
-    } = IdAPI();
-
-    const {
-      previewAriaLabel,
-    } = AriaLabelAPI();
-
-    const {
-      mousedown,
-      mousemove,
-      mouseup,
-    } = MouseEventsAPI(context, {
-      previewRef,
-    });
-
-    const {
-      countAllRowsFormatted,
-      currentRow,
-      nextAvailableRowIndex,
-      previousAvailableRowIndex,
-      rowNumber,
-      rowNumberFormatted,
-    } = RowAPI(props);
-
-    const {
-      disabledBtnArrowLeft,
-      disabledBtnArrowRight,
-      toNextRow,
-      toPreviousRow,
-    } = ArrowsAPI(props, context, {
-      nextAvailableRowIndex,
-      previousAvailableRowIndex,
-      rowNumber,
-    });
-
-    onMounted(() => {
-      if (!isMobile.value) {
-        context.emit("togglePreviewResize", {
-          isOpen: true,
-          previewRef: previewRef.value,
-        });
-      }
-    });
-
-    onBeforeUnmount(() => {
-      if (!isMobile.value) {
-        context.emit("togglePreviewResize", {
-          isOpen: false,
-          previewRef: previewRef.value,
-        });
-      }
-    });
-
-    return {
-      countAllRowsFormatted,
-      currentRow,
-      disabledBtnArrowLeft,
-      disabledBtnArrowRight,
-      idLocal,
-      mousedown,
-      mousemove,
-      mouseup,
-      previewAriaLabel,
-      previewRef,
-      rowNumber,
-      rowNumberFormatted,
-      toNextRow,
-      toPreviousRow,
-    };
-  },
-  render() {
-    const HEADER = [
-      this.isLoadingTable ?
-        h(ACloak) :
-        h("div", {}, [
-          h(ATranslation, {
-            class: "a_table__preview_right__header__text",
-            tag: "span",
-            text: "_A_TABLE_PREVIEW_RIGHT_HEADER_{{rowNumber}}_{{rowNumberFormatted}}_{{countAllRows}}_{{countAllRowsFormatted}}_",
-            extra: {
-              rowNumber: this.rowNumber,
-              rowNumberFormatted: this.rowNumberFormatted,
-              countAllRows: this.countAllRows,
-              countAllRowsFormatted: this.countAllRowsFormatted,
-            },
-          }),
-          h("div", {
-            class: "a_table__preview_right__header__icons",
-          }, [
-            h(AButton, {
-              class: "a_btn a_btn_transparent_dark a_btn_small",
-              disabled: this.disabledBtnArrowLeft,
-              iconLeft: "ArrowLeft",
-              title: "_A_TABLE_PREVIEW_RIGHT_PREVIOUS_ROW_",
-              textScreenReader: "_A_TABLE_PREVIEW_RIGHT_PREVIOUS_ROW_",
-              onClick: this.toPreviousRow,
-            }),
-            h(AButton, {
-              class: "a_btn a_btn_transparent_dark a_btn_small",
-              disabled: this.disabledBtnArrowRight,
-              iconLeft: "ArrowRight",
-              title: "_A_TABLE_PREVIEW_RIGHT_NEXT_ROW_",
-              textScreenReader: "_A_TABLE_PREVIEW_RIGHT_NEXT_ROW_",
-              onClick: this.toNextRow,
-            }),
-          ]),
-        ]),
-      !this.isMobile ? h(AButton, {
-        class: "a_btn a_btn_transparent_dark a_table__preview_right__btn_close",
-        iconLeft: "Close",
-        iconClass: "a_table__preview_right__btn_close__icon",
-        title: "_A_TABLE_PREVIEW_RIGHT_CLOSE_",
-        textScreenReader: "_A_TABLE_PREVIEW_RIGHT_CLOSE_",
-        onClick: () => this.$emit("closePreview"),
-      }) : "",
-    ];
-
-    const BODY = [
-      this.isLoadingTable ? h(ACloak) :
-        this.$slots.preview ?
-          this.$slots.preview({
-            row: this.currentRow,
-            rowIndex: this.rowIndex,
-          }) :
-          h(ATranslation, {
-            text: "_A_TABLE_PREVIEW_RIGHT_HAS_NOT_SLOT_",
-          }),
-    ];
-
-    if (this.isMobile) {
-      return h(AModal, {
-        hideFooter: true,
-        close: () => this.$emit("closePreview"),
-        size: "xxl",
-      }, {
-        modalHeader: () => HEADER,
-        modalBody: () => BODY,
-      });
-    }
-
-    return h("div", {
-      ref: "previewRef",
-      id: this.idLocal,
-      "aria-label": this.previewAriaLabel,
-      class: "a_table__preview_right",
-      style: this.previewStyles,
-      tabindex: -1,
-    }, [
-      h(AResizer, {
-        class: "a_table__preview_right__resizer",
-        direction: "x",
-        disabled: this.isLoadingOptions,
-        onMousedown: this.mousedown,
-        onMousemove: this.mousemove,
-        onMouseup: this.mouseup,
-        onMouseoutDocument: this.mouseup,
-      }),
-      h(this.previewHeaderTag, {
-        class: "a_table__preview_right__header",
-      }, HEADER),
-      h("div", {
-        class: "a_table__preview_right__body",
-      }, BODY),
-    ]);
-  },
-};
+import {
+  h,
+  onBeforeUnmount,
+  onMounted, toRef,
+} from "vue";
+
+import AButton from "../../AButton/AButton";
+import ACloak from "../../ACloak/ACloak";
+import AModal from "../../AModal/AModal";
+import AResizer from "../../AResizer/AResizer";
+import ATranslation from "../../ATranslation/ATranslation";
+
+import ArrowsAPI from "./compositionAPI/ArrowsAPI";
+import IdAPI from "./compositionAPI/IdAPI";
+import MouseEventsAPI from "./compositionAPI/MouseEventsAPI";
+import PreviewRightRewAPI from "../compositionAPI/PreviewRightRewAPI";
+import RowAPI from "./compositionAPI/RowAPI";
+
+export default {
+  name: "ATablePreviewRight",
+  props: {
+    countAllRows: {
+      type: Number,
+      required: true,
+    },
+    disabledPreviewRowCallback: {
+      type: Function,
+      required: false,
+      default: () => {},
+    },
+    isLoadingTable: {
+      type: Boolean,
+      required: false,
+    },
+    isMobile: {
+      type: Boolean,
+      required: false,
+    },
+    limitPagination: {
+      type: Number,
+      required: false,
+      default: undefined,
+    },
+    offsetPagination: {
+      type: Number,
+      required: false,
+      default: undefined,
+    },
+    previewHeaderTag: {
+      type: String,
+      required: true,
+    },
+    previewStyles: {
+      type: [String, Object],
+      required: false,
+      default: undefined,
+    },
+    rowIndex: {
+      type: Number,
+      required: true,
+    },
+    rows: {
+      type: Array,
+      required: true,
+    },
+    usePagination: {
+      type: Boolean,
+      required: false,
+    },
+  },
+  emits: [
+    "closePreview",
+    "mousedownResizePreviewRight",
+    "mousemoveResizePreviewRight",
+    "mouseupResizePreviewRight",
+    "togglePreviewResize",
+    "togglePreview",
+    "update:offset",
+  ],
+  inject: [
+    "isLoadingOptions",
+  ],
+  setup(props, context) {
+    const isMobile = toRef(props, "isMobile");
+
+    const {
+      previewRef,
+    } = PreviewRightRewAPI();
+
+    const {
+      idLocal,
+    } = IdAPI();
+
+    const {
+      mousedown,
+      mousemove,
+      mouseup,
+    } = MouseEventsAPI(context, {
+      previewRef,
+    });
+
+    const {
+      countAllRowsFormatted,
+      currentRow,
+      nextAvailableRowIndex,
+      previousAvailableRowIndex,
+      rowNumber,
+      rowNumberFormatted,
+    } = RowAPI(props);
+
+    const {
+      disabledBtnArrowLeft,
+      disabledBtnArrowRight,
+      toNextRow,
+      toPreviousRow,
+    } = ArrowsAPI(props, context, {
+      nextAvailableRowIndex,
+      previousAvailableRowIndex,
+      rowNumber,
+    });
+
+    onMounted(() => {
+      if (!isMobile.value) {
+        context.emit("togglePreviewResize", {
+          isOpen: true,
+          previewRef: previewRef.value,
+        });
+      }
+    });
+
+    onBeforeUnmount(() => {
+      if (!isMobile.value) {
+        context.emit("togglePreviewResize", {
+          isOpen: false,
+          previewRef: previewRef.value,
+        });
+      }
+    });
+
+    return {
+      countAllRowsFormatted,
+      currentRow,
+      disabledBtnArrowLeft,
+      disabledBtnArrowRight,
+      idLocal,
+      mousedown,
+      mousemove,
+      mouseup,
+      previewRef,
+      rowNumber,
+      rowNumberFormatted,
+      toNextRow,
+      toPreviousRow,
+    };
+  },
+  render() {
+    const HEADER = [
+      this.isLoadingTable ?
+        h(ACloak) :
+        h("div", {}, [
+          h(ATranslation, {
+            class: "a_table__preview_right__header__text",
+            tag: "span",
+            text: "_A_TABLE_PREVIEW_RIGHT_HEADER_{{rowNumber}}_{{rowNumberFormatted}}_{{countAllRows}}_{{countAllRowsFormatted}}_",
+            extra: {
+              rowNumber: this.rowNumber,
+              rowNumberFormatted: this.rowNumberFormatted,
+              countAllRows: this.countAllRows,
+              countAllRowsFormatted: this.countAllRowsFormatted,
+            },
+          }),
+          h("div", {
+            class: "a_table__preview_right__header__icons",
+          }, [
+            h(AButton, {
+              class: "a_btn a_btn_transparent_dark a_btn_small",
+              disabled: this.disabledBtnArrowLeft,
+              iconLeft: "ArrowLeft",
+              title: "_A_TABLE_PREVIEW_RIGHT_PREVIOUS_ROW_",
+              textScreenReader: "_A_TABLE_PREVIEW_RIGHT_PREVIOUS_ROW_",
+              onClick: this.toPreviousRow,
+            }),
+            h(AButton, {
+              class: "a_btn a_btn_transparent_dark a_btn_small",
+              disabled: this.disabledBtnArrowRight,
+              iconLeft: "ArrowRight",
+              title: "_A_TABLE_PREVIEW_RIGHT_NEXT_ROW_",
+              textScreenReader: "_A_TABLE_PREVIEW_RIGHT_NEXT_ROW_",
+              onClick: this.toNextRow,
+            }),
+          ]),
+        ]),
+      !this.isMobile ? h(AButton, {
+        class: "a_btn a_btn_transparent_dark a_table__preview_right__btn_close",
+        iconLeft: "Close",
+        iconClass: "a_table__preview_right__btn_close__icon",
+        title: "_A_TABLE_PREVIEW_RIGHT_CLOSE_",
+        textScreenReader: "_A_TABLE_PREVIEW_RIGHT_CLOSE_",
+        onClick: () => this.$emit("closePreview"),
+      }) : "",
+    ];
+
+    const BODY = [
+      this.isLoadingTable ? h(ACloak) :
+        this.$slots.preview ?
+          this.$slots.preview({
+            row: this.currentRow,
+            rowIndex: this.rowIndex,
+          }) :
+          h(ATranslation, {
+            text: "_A_TABLE_PREVIEW_RIGHT_HAS_NOT_SLOT_",
+          }),
+    ];
+
+    if (this.isMobile) {
+      return h(AModal, {
+        hideFooter: true,
+        close: () => this.$emit("closePreview"),
+        size: "xxl",
+      }, {
+        modalHeader: () => HEADER,
+        modalBody: () => BODY,
+      });
+    }
+
+    return h("div", {
+      ref: "previewRef",
+      id: this.idLocal,
+      class: "a_table__preview_right",
+      style: this.previewStyles,
+      tabindex: -1,
+    }, [
+      h(AResizer, {
+        class: "a_table__preview_right__resizer",
+        direction: "x",
+        disabled: this.isLoadingOptions,
+        onMousedown: this.mousedown,
+        onMousemove: this.mousemove,
+        onMouseup: this.mouseup,
+        onMouseoutDocument: this.mouseup,
+      }),
+      h(ATranslation, {
+        class: "a_sr_only",
+        text: "_A_TABLE_PREVIEW_RIGHT_ARIA_LABEL_",
+      }),
+      h(this.previewHeaderTag, {
+        class: "a_table__preview_right__header",
+      }, HEADER),
+      h("div", {
+        class: "a_table__preview_right__body",
+      }, BODY),
+    ]);
+  },
+};

package/src/ATable/compositionAPI/ScrollControlAPI.js

@@ -33,19 +33,23 @@ export default function ScrollControlAPI(props, { emit }, {
 
   const aTableRef = ref(undefined);
   const columnsVisibleAdditionalSpaceForOneGrow = ref(0);
+  const resizeTimeout = ref(undefined);
   const tableWidth = ref(undefined);
   let changingTableWidth = false;
+  const delta = 18; // approx scrollbar width
 
   const columnActionsWidthMinLocal = computed(() => {
     if (isActionColumnVisible.value) {
       return columnActionsWidthMin.value;
     }
+
     return 0;
   });
 
   const columnsSpecialWidth = computed(() => {
     const columnMultipleActionsWidth = isMultipleActionsActive.value ? columnActionsWidthMin.value : 0;
-    const scrollBarWidth = isSimpleTable.value ? 0 : 10; // delta for table resize when scrollbar appears
+    const scrollBarWidth = isSimpleTable.value ? 0 : delta; // delta for table resize when scrollbar appears
+
     return columnMultipleActionsWidth + scrollBarWidth;
   });
 
@@ -153,11 +157,12 @@ export default function ScrollControlAPI(props, { emit }, {
     setColumnsScrollInvisible();
   };
 
-  const resizeOb = new ResizeObserver(entries => {
-    // since we are observing only a single element, so we access the first element in entries array
-    // TODO add delta for table resize when scrollbar appears
+  const adjustTableWidth = ({ entries, forceAdjust }) => {
     const RECT = entries[0].contentRect;
-    if (tableWidth.value !== RECT.width) {
+    const tableWidthMissingOrExceededDelta = forceAdjust ||
+      tableWidth.value > RECT.width + delta ||
+      tableWidth.value < RECT.width - delta;
+    if (tableWidthMissingOrExceededDelta) {
       if (!changingTableWidth) {
         changingTableWidth = true;
         tableWidth.value = RECT.width;
@@ -165,6 +170,19 @@ export default function ScrollControlAPI(props, { emit }, {
         changingTableWidth = false;
       }
     }
+  };
+
+  const resizeOb = new ResizeObserver(entries => {
+    // since we are observing only a single element, so we access the first element in entries array
+    if (!tableWidth.value) {
+      adjustTableWidth({ entries, forceAdjust: true });
+    } else {
+      clearTimeout(resizeTimeout.value);
+
+      resizeTimeout.value = setTimeout(() => {
+        adjustTableWidth({ entries });
+      }, 300);
+    }
   });
 
   const onWatchMobileScrollControl = newValue => {

package/src/ATable/ATablePreviewDown/compositionAPI/AriaLabelAPI.js

@@ -1,19 +0,0 @@
-import {
-  computed,
-} from "vue";
-
-import {
-  getTranslatedText,
-} from "../../../ATranslation/compositionAPI/UtilsAPI";
-
-export default function AriaLabelAPI() {
-  const previewAriaLabel = computed(() => {
-    return getTranslatedText({
-      placeholder: "_A_TABLE_PREVIEW_DOWN_ARIA_LABEL_",
-    });
-  });
-
-  return {
-    previewAriaLabel,
-  };
-}

package/src/ATable/ATablePreviewRight/compositionAPI/AriaLabelAPI.js

@@ -1,19 +0,0 @@
-import {
-  computed,
-} from "vue";
-
-import {
-  getTranslatedText,
-} from "../../../ATranslation/compositionAPI/UtilsAPI";
-
-export default function AriaLabelAPI() {
-  const previewAriaLabel = computed(() => {
-    return getTranslatedText({
-      placeholder: "_A_TABLE_PREVIEW_RIGHT_ARIA_LABEL_",
-    });
-  });
-
-  return {
-    previewAriaLabel,
-  };
-}