aloha-vue 1.0.322 → 1.0.324

package/docs/package.json

@@ -11,7 +11,7 @@
     "build-css": "node-sass --include-path scss styles/styles.scss public/styles.css"
   },
   "dependencies": {
-    "@popperjs/core": "2.11.6",
+    "@popperjs/core": "2.11.7",
     "aloha-css": "1.0.97",
     "dompurify": "2.4.1",
     "fecha": "^4.2.3",

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.322",
+  "version": "1.0.324",
   "author": "Ilia Brykin",
   "scripts": {
     "build-icons": "node scriptsNode/iconsSvgToJs.js bootstrap3 && node scriptsNode/iconsSvgToJs.js bootstrap-1-9-1"
   },
   "dependencies": {
-    "@popperjs/core": "2.11.5",
-    "aloha-css": "1.0.89",
-    "axios": "^0.27.2",
+    "@popperjs/core": "2.11.7",
+    "aloha-css": "1.0.97",
+    "axios": "1.4.0",
     "dompurify": "2.4.1",
     "fecha": "^4.2.3",
     "lodash-es": "^4.17.21",
     "tiny-emitter": "2.1.0",
     "tinymce": "6.2.0",
-    "vue": "3.2.37"
+    "vue": "^3.2.47"
   },
   "devDependencies": {
     "lodash": "^4.17.21"

package/src/ATable/ATable.js

@@ -352,6 +352,7 @@ export default {
   },
   setup(props, context) {
     const tableGrandparentRef = ref(undefined);
+    const tableRef = ref(undefined);
     const isMultipleActionsActive = ref(undefined);
 
     const {
@@ -474,6 +475,7 @@ export default {
       limit,
       closePreviewAll,
       setEmptySelectedRowsIndexes,
+      tableRef,
     });
     
     const {
@@ -611,6 +613,7 @@ export default {
       startSearch,
       tableChildRole,
       tableGrandparentRef,
+      tableRef,
       tableRoleAttributes,
       toggleBtnAllRows,
       toggleMultipleActionsActive,
@@ -720,6 +723,7 @@ export default {
             onToggleBtnAllRows: this.toggleBtnAllRows,
           }, this.$slots),
           this.isViewTableVisible && h("div", {
+            ref: "tableRef",
             class: "a_table",
             ...this.tableRoleAttributes,
           }, [

package/src/ATable/compositionAPI/LimitOffsetAPI.js

@@ -8,10 +8,32 @@ export default function LimitOffsetAPI(props, { emit }, {
   limit = ref(0),
   closePreviewAll = () => {},
   setEmptySelectedRowsIndexes = () => {},
+  tableRef = ref(undefined),
 }) {
   const offsetStart = toRef(props, "offsetStart");
 
+  const setFocusToTable = () => {
+    if (tableRef.value) {
+      tableRef.value.setAttribute("tabindex", "-1");
+      tableRef.value.focus();
+      tableRef.value.removeAttribute("tabindex");
+    }
+  };
+
+  const scrollToTable = () => {
+    if (tableRef.value) {
+      const elementTop = tableRef.value.getBoundingClientRect().top + window.scrollY;
+      let scrollToPosition = elementTop - (window.innerHeight / 2);
+      if (scrollToPosition < 0) {
+        scrollToPosition = 0;
+      }
+      document.documentElement.scrollTop = scrollToPosition;
+    }
+  };
+
   const changeOffset = offsetLocal => {
+    setFocusToTable();
+    scrollToTable();
     offset.value = offsetLocal;
     emit("changeOffset", {
       offset: offsetLocal,
@@ -22,6 +44,8 @@ export default function LimitOffsetAPI(props, { emit }, {
   };
 
   const changeLimit = limitLocal => {
+    setFocusToTable();
+    scrollToTable();
     limit.value = limitLocal;
     offset.value = offsetStart.value;
     emit("changeLimit", {

package/src/ATooltip/compositionAPI/PopperContainerAPI.js

@@ -17,7 +17,7 @@ export default function PopperContainerAPI(props) {
       POPPER_CONTAINER.id = popperContainerId.value;
       POPPER_CONTAINER.className = "a_popup_container";
       POPPER_CONTAINER.setAttribute("aria-hidden", "true");
-      document.body.appendChild(POPPER_CONTAINER);
+      document.body.prepend(POPPER_CONTAINER);
     }
   };
 

package/src/styles/styles.scss

@@ -6,6 +6,7 @@
   width: 0;
   height: 0;
   z-index: 1900;
+  top: 100%;
 }
 
 @import "components/AIcon";

package/src/utils/utilsDOM.js

@@ -1,8 +1,8 @@
-export function scrollToElement({ element, isMiddleOfScreen = true }) {
+export function scrollToElement({ element, isMiddleOfScreen = true, behavior = "smooth" }) {
   if (isMiddleOfScreen) {
     window.scroll({
       top: element.offsetTop - window.innerHeight / 2,
-      behavior: "smooth",
+      behavior,
     });
   } else {
     element.scrollIntoView();