aloha-vue 1.2.256 → 1.2.258

package/package.json

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

package/src/ADropdown/compositionAPI/PopoverAPI.js

@@ -1,75 +1,82 @@
-import {
-  computed,
-  ref,
-  toRef,
-} from "vue";
-
-import {
-  autoUpdate,
-  computePosition,
-  flip,
-  shift,
-} from "@floating-ui/vue";
-
-export default function PopoverAPI(props, {
-  dropdownButtonRef = ref(undefined),
-  dropdownRef = ref(undefined),
-}) {
-  const floatingFlip = toRef(props, "floatingFlip");
-  const floatingShift = toRef(props, "floatingShift");
-  const placement = toRef(props, "placement");
-
-  const cleanupPopper = ref(undefined);
-
-  const middleware = computed(() => {
-    const MIDDLEWARE = [];
-    if (floatingFlip.value?.use) {
-      MIDDLEWARE.push(
-        flip(floatingFlip.value),
-      );
-    }
-    if (floatingShift.value?.use) {
-      MIDDLEWARE.push(
-        shift(floatingShift.value),
-      );
-    }
-
-    return MIDDLEWARE;
-  });
-
-  const startPopper = () => {
-    if (!cleanupPopper.value) {
-      cleanupPopper.value = autoUpdate(
-        dropdownButtonRef.value.$el,
-        dropdownRef.value,
-        () => {
-          computePosition(
-            dropdownButtonRef.value.$el,
-            dropdownRef.value,
-            {
-              placement: placement.value,
-              middleware: middleware.value,
-            },
-          ).then(({ x, y }) => {
-            Object.assign(dropdownRef.value.style, {
-              left: `${ x }px`,
-              top: `${ y }px`,
-            });
-          });
-        }
-      );
-    }
-  };
-
-  const destroyPopover = () => {
-    if (cleanupPopper.value) {
-      cleanupPopper.value();
-      cleanupPopper.value = undefined;
-    }
-  };
-
-  return {
-    destroyPopover,
-    startPopper,
-  };
-}
+import {
+  computed,
+  ref,
+  toRef,
+} from "vue";
+
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  shift,
+} from "@floating-ui/vue";
+
+export default function PopoverAPI(props, {
+  dropdownButtonRef = ref(undefined),
+  dropdownRef = ref(undefined),
+}) {
+  const floatingFlip = toRef(props, "floatingFlip");
+  const floatingShift = toRef(props, "floatingShift");
+  const placement = toRef(props, "placement");
+
+  const cleanupPopper = ref(undefined);
+
+  const middleware = computed(() => {
+    const MIDDLEWARE = [];
+    if (floatingFlip.value?.use) {
+      MIDDLEWARE.push(
+        flip(floatingFlip.value),
+      );
+    }
+    if (floatingShift.value?.use) {
+      MIDDLEWARE.push(
+        shift(floatingShift.value),
+      );
+    }
+
+    return MIDDLEWARE;
+  });
+
+  const startPopper = () => {
+    if (!cleanupPopper.value &&
+      dropdownButtonRef.value.$el &&
+      dropdownRef.value) {
+      cleanupPopper.value = autoUpdate(
+        dropdownButtonRef.value.$el,
+        dropdownRef.value,
+        () => {
+          if (!dropdownButtonRef.value.$el ||
+            !dropdownRef.value) {
+            return;
+          }
+
+          computePosition(
+            dropdownButtonRef.value.$el,
+            dropdownRef.value,
+            {
+              placement: placement.value,
+              middleware: middleware.value,
+            },
+          ).then(({ x, y }) => {
+            Object.assign(dropdownRef.value.style, {
+              left: `${ x }px`,
+              top: `${ y }px`,
+            });
+          });
+        }
+      );
+    }
+  };
+
+  const destroyPopover = () => {
+    if (cleanupPopper.value) {
+      cleanupPopper.value();
+      cleanupPopper.value = undefined;
+    }
+  };
+
+  return {
+    destroyPopover,
+    startPopper,
+  };
+}

package/src/AMenu2/compositionAPI/PopoverAPI.js

@@ -1,131 +1,139 @@
-import {
-  computed,
-  ref,
-  toRef,
-} from "vue";
-
-import {
-  getElementId,
-} from "../utils/utils";
-import {
-  autoUpdate,
-  computePosition,
-  flip,
-  limitShift,
-  shift
-} from "@floating-ui/vue";
-import {
-  clone,
-  forEach,
-} from "lodash-es";
-
-export default function PopoverAPI(props, {
-  isMenuOpen = computed(() => false),
-  panelParentsOpen = ref([]),
-}) {
-  const menuId = toRef(props, "menuId");
-
-  const cleanupPopper = ref({});
-  const menuRef = ref(undefined);
-  const isEventCloseClickStarted = ref(false);
-
-  const getElementLink = ({ id }) => {
-    const ID = getElementId({
-      menuId: menuId.value,
-      id,
-      suffix: "link",
-    });
-    return document.getElementById(ID);
-  };
-
-  const getElementPanel = ({ id }) => {
-    const ID = getElementId({
-      menuId: menuId.value,
-      id,
-      suffix: "panel",
-    });
-    return document.getElementById(ID);
-  };
-
-  const onClickEvent = $event => {
-    if (!menuRef.value.contains($event.target)) {
-      panelParentsOpen.value = [];
-    }
-  };
-
-  const setEventCloseClick = () => {
-    if (!isEventCloseClickStarted.value) {
-      isEventCloseClickStarted.value = true;
-      document.addEventListener("click", onClickEvent);
-    }
-  };
-
-  const destroyEventCloseClick = () => {
-    isEventCloseClickStarted.value = false;
-    document.removeEventListener("click", onClickEvent);
-  };
-
-  const cleanupPopperCurrent = key => {
-    if (cleanupPopper.value[key]) {
-      cleanupPopper.value[key]();
-      delete cleanupPopper.value[key];
-      const PANEL_ELEMENT = getElementPanel({ id: key });
-      PANEL_ELEMENT.style.removeProperty("left");
-      PANEL_ELEMENT.style.removeProperty("top");
-    }
-  };
-
-  const startPopper = () => {
-    if (isMenuOpen.value) {
-      return;
-    }
-    setEventCloseClick();
-    const CLEANUP_POPPER = clone(cleanupPopper.value);
-    forEach(panelParentsOpen.value, id => {
-      if (cleanupPopper.value[id]) {
-        delete CLEANUP_POPPER[id];
-        return;
-      }
-      const LINK_ELEMENT = getElementLink({ id });
-      const PANEL_ELEMENT = getElementPanel({ id });
-      cleanupPopper.value[id] = autoUpdate(
-        LINK_ELEMENT,
-        PANEL_ELEMENT,
-        () => {
-          computePosition(
-            LINK_ELEMENT,
-            PANEL_ELEMENT,
-            {
-              placement: "right",
-              middleware: [
-                flip(),
-                shift({ limiter: limitShift() }),
-              ]
-            },
-          ).then(({ x, y }) => {
-            Object.assign(PANEL_ELEMENT.style, {
-              left: `${ x }px`,
-              top: `${ y }px`,
-            });
-          });
-        }
-      );
-    });
-    forEach(CLEANUP_POPPER, (_, key) => {
-      cleanupPopperCurrent(key);
-    });
-  };
-
-  const destroyPopover = () => {
-    forEach(cleanupPopper.value, (_, key) => {
-      cleanupPopperCurrent(key);
-    });
-    destroyEventCloseClick();
-  };
-
-  return {
-    destroyPopover,
-    menuRef,
-    startPopper,
-  };
-}
+import {
+  computed,
+  ref,
+  toRef,
+} from "vue";
+
+import {
+  getElementId,
+} from "../utils/utils";
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  limitShift,
+  shift
+} from "@floating-ui/vue";
+import {
+  clone,
+  forEach,
+} from "lodash-es";
+
+export default function PopoverAPI(props, {
+  isMenuOpen = computed(() => false),
+  panelParentsOpen = ref([]),
+}) {
+  const menuId = toRef(props, "menuId");
+
+  const cleanupPopper = ref({});
+  const menuRef = ref(undefined);
+  const isEventCloseClickStarted = ref(false);
+
+  const getElementLink = ({ id }) => {
+    const ID = getElementId({
+      menuId: menuId.value,
+      id,
+      suffix: "link",
+    });
+    return document.getElementById(ID);
+  };
+
+  const getElementPanel = ({ id }) => {
+    const ID = getElementId({
+      menuId: menuId.value,
+      id,
+      suffix: "panel",
+    });
+    return document.getElementById(ID);
+  };
+
+  const onClickEvent = $event => {
+    if (!menuRef.value.contains($event.target)) {
+      panelParentsOpen.value = [];
+    }
+  };
+
+  const setEventCloseClick = () => {
+    if (!isEventCloseClickStarted.value) {
+      isEventCloseClickStarted.value = true;
+      document.addEventListener("click", onClickEvent);
+    }
+  };
+
+  const destroyEventCloseClick = () => {
+    isEventCloseClickStarted.value = false;
+    document.removeEventListener("click", onClickEvent);
+  };
+
+  const cleanupPopperCurrent = key => {
+    if (cleanupPopper.value[key]) {
+      cleanupPopper.value[key]();
+      delete cleanupPopper.value[key];
+      const PANEL_ELEMENT = getElementPanel({ id: key });
+      PANEL_ELEMENT.style.removeProperty("left");
+      PANEL_ELEMENT.style.removeProperty("top");
+    }
+  };
+
+  const startPopper = () => {
+    if (isMenuOpen.value) {
+      return;
+    }
+    setEventCloseClick();
+    const CLEANUP_POPPER = clone(cleanupPopper.value);
+    forEach(panelParentsOpen.value, id => {
+      if (cleanupPopper.value[id]) {
+        delete CLEANUP_POPPER[id];
+        return;
+      }
+      const LINK_ELEMENT = getElementLink({ id });
+      const PANEL_ELEMENT = getElementPanel({ id });
+      if (!LINK_ELEMENT ||
+        !PANEL_ELEMENT) {
+        return;
+      }
+      cleanupPopper.value[id] = autoUpdate(
+        LINK_ELEMENT,
+        PANEL_ELEMENT,
+        () => {
+          if (!LINK_ELEMENT ||
+            !PANEL_ELEMENT) {
+            return;
+          }
+          computePosition(
+            LINK_ELEMENT,
+            PANEL_ELEMENT,
+            {
+              placement: "right",
+              middleware: [
+                flip(),
+                shift({ limiter: limitShift() }),
+              ]
+            },
+          ).then(({ x, y }) => {
+            Object.assign(PANEL_ELEMENT.style, {
+              left: `${ x }px`,
+              top: `${ y }px`,
+            });
+          });
+        }
+      );
+    });
+    forEach(CLEANUP_POPPER, (_, key) => {
+      cleanupPopperCurrent(key);
+    });
+  };
+
+  const destroyPopover = () => {
+    forEach(cleanupPopper.value, (_, key) => {
+      cleanupPopperCurrent(key);
+    });
+    destroyEventCloseClick();
+  };
+
+  return {
+    destroyPopover,
+    menuRef,
+    startPopper,
+  };
+}

package/src/AShowMore/compositionAPI/ObservingAPI.js

@@ -5,6 +5,7 @@ import {
 } from "vue";
 
 import {
+  debounce,
   get,
 } from "lodash-es";
 
@@ -33,9 +34,11 @@ export default function ObservingAPI(props, {
     if (isBtnHiddenDependentOnTextLength.value) {
       return;
     }
-    observer.value = new ResizeObserver(() => {
-      checkHeight();
-    });
+    observer.value = new ResizeObserver(
+      debounce(() => {
+        checkHeight();
+      }, 300)
+    );
     observer.value.observe(containerRef.value);
   };
 

package/src/ATable/compositionAPI/PreviewRightResizeAPI.js

@@ -7,6 +7,7 @@ import {
 import PreviewRightRewAPI from "./PreviewRightRewAPI";
 
 import {
+  debounce,
   get,
 } from "lodash-es";
 
@@ -90,14 +91,16 @@ export default function PreviewRightResizeAPI(props, { emit }, {
     });
   };
 
-  const resizeOb = new ResizeObserver(entries => {
-    // since we are observing only a single element, so we access the first element in entries array
-    const RECT = entries[0].contentRect;
-    if (tableGrandparentWidth !== RECT.width) {
-      tableGrandparentWidth = RECT.width;
-      correctTableUndPreviewWidth();
-    }
-  });
+  const resizeOb = new ResizeObserver(
+    debounce(entries => {
+      // since we are observing only a single element, so we access the first element in entries array
+      const RECT = entries[0].contentRect;
+      if (tableGrandparentWidth !== RECT.width) {
+        tableGrandparentWidth = RECT.width;
+        correctTableUndPreviewWidth();
+      }
+    }, 300)
+  );
 
   const addEventListenerWindowResize = () => {
     resizeOb.observe(tableGrandparentRef.value);

package/src/ATable/compositionAPI/ScrollControlAPI.js

@@ -12,6 +12,7 @@ import {
 } from "../utils/utils.js";
 import {
   cloneDeep,
+  debounce,
   forEach,
   isNil,
   isUndefined,
@@ -35,7 +36,6 @@ 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 = 20; // approx scrollbar width + 2px for <tr> border
@@ -179,18 +179,16 @@ export default function ScrollControlAPI(props, { emit }, {
     }
   };
 
-  const resizeOb = new ResizeObserver(entries => {
-    // since we are observing only a single element, so we access the first element in entries array
-    if (isUndefined(tableWidth.value)) {
-      adjustTableWidth({ entries, forceAdjust: true });
-    } else {
-      clearTimeout(resizeTimeout.value);
-
-      resizeTimeout.value = setTimeout(() => {
+  const resizeOb = new ResizeObserver(
+    debounce(entries => {
+      // since we are observing only a single element, so we access the first element in entries array
+      if (isUndefined(tableWidth.value)) {
+        adjustTableWidth({ entries, forceAdjust: true });
+      } else {
         adjustTableWidth({ entries });
-      }, 300);
-    }
-  });
+      }
+    }, 300)
+  );
 
   const onWatchMobileScrollControl = newValue => {
     if (newValue) {