- BsLightbox: add z-index property to control component stacking within HTML layers.

ahmadfajar · ahmadfajar · commit 4ce95e8f4681 · 2024-11-14T00:05:10.000+07:00
- BsTooltip: improve UI performance.
- Update CHANGELOG.md
- Bump to version 2.0.14
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,22 @@
 > All notable changes to this project will be documented in this file.
 
 
+## v2.0.14
+
+Released: November 14, 2024
+
+### Features & Improvements
+
+- **BsLightbox**: add `z-index` property to control component stacking within HTML layers.
+- **BsPopover**: improve UI display positioning.
+- **BsTooltip**: improve UI performance.
+
+### Bug Fixes
+
+- **BsArrayStore**: fixed bug loading state was not updated when method _load_ 
+  was called without argument.
+
+
 ## v2.0.13
 
 Released: September 27, 2024
@@ -26,7 +42,7 @@ Released: September 20, 2024
 
 ### Features & Improvements
 
-- **BsLightbox**: improve image loading using preloader
+- **BsLightbox**: improve image loading using preloader.
 - **BsSideDrawer**: improve collapse animation if used together with `<BsAppbar>`.
 
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-mdbootstrap",
-  "version": "2.0.13",
+  "version": "2.0.14",
   "description": "Bootstrap5 Material Design Components for Vue.js",
   "author": {
     "name": "Ahmad Fajar",
@@ -68,27 +68,27 @@
     "lodash": "^4.17.21",
     "luxon": "^3.5.0",
     "resize-observer-polyfill": "^1.5.1",
-    "vue": "^3.5.8"
+    "vue": "^3.5.12"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@tsconfig/node20": "^20.1.4",
     "@types/body-scroll-lock": "^3.1.2",
-    "@types/lodash": "^4.17.9",
+    "@types/lodash": "^4.17.13",
     "@types/luxon": "^3.4.2",
-    "@types/node": "^22.7.0",
-    "@vue/tsconfig": "^0.5.1",
+    "@types/node": "^22.9.0",
+    "@vue/tsconfig": "^0.6.0",
     "bootstrap": "5.2.3",
     "clean-css-cli": "^5.6.3",
     "compass-mixins": "^0.12.12",
     "npm-run-all": "^4.1.5",
     "rimraf": "^6.0.1",
     "rollup-plugin-dts": "^6.1.1",
-    "sass": "^1.79.3",
-    "terser": "^5.33.0",
-    "typescript": "^5.6.2",
-    "vite": "^5.4.8",
+    "sass": "^1.80.7",
+    "terser": "^5.36.0",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.11",
     "vue-router": "^4.4.5"
   },
   "browserslist": [
diff --git a/scss/_banner.scss b/scss/_banner.scss
@@ -1,5 +1,5 @@
 /*!
- * Vue MDBootstrap v2.0.13
+ * Vue MDBootstrap v2.0.14
  * Released under the BSD-3 License.
  * Copyright Ahmad Fajar (https://ahmadfajar.github.io).
  */
diff --git a/src/components/Modal/lightbox.scss b/src/components/Modal/lightbox.scss
@@ -19,13 +19,14 @@
     --#{$prefix}lightbox-thumbnail-opacity: 0.5;
     --#{$prefix}lightbox-thumbnail-active-border-color: #{$red-base};
     --#{$prefix}lightbox-thumbnail-active-border-width: 2px;
+    // --#{$prefix}lightbox-zindex: 1990;
 
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     position: fixed;
-    z-index: 1032;
+    // z-index: var(--#{$prefix}lightbox-zindex);
 
     &.#{$prefix}lightbox-overlay {
         background-color: var(--#{$prefix}lightbox-overlay-bg);
diff --git a/src/components/Modal/mixins/lightboxApi.ts b/src/components/Modal/mixins/lightboxApi.ts
@@ -82,6 +82,7 @@ export function useRenderLightbox(
                               `${cssPrefix}lightbox-wrap`,
                               props.overlay ? `${cssPrefix}lightbox-overlay` : '',
                           ],
+                          style: { 'z-index': props.zIndex },
                       },
                       [
                           createLightboxToolbar(
diff --git a/src/components/Modal/mixins/lightboxProps.ts b/src/components/Modal/mixins/lightboxProps.ts
@@ -62,4 +62,9 @@ export const lightboxProps = {
         default: undefined,
         validator: (v: string) => ['out-in', 'in-out'].includes(v),
     } as Prop<TTransitionMode>,
+    zIndex: {
+        type: [String, Number],
+        default: 1990,
+        validator: (v: string): boolean => !isNaN(parseInt(v, 10)),
+    },
 };
diff --git a/src/components/Modal/types/index.d.ts b/src/components/Modal/types/index.d.ts
@@ -132,6 +132,10 @@ export declare type TLightboxOptionProps = TPopupOptions & {
      * Available modes are: `out-in` and `in-out`.
      */
     transitionMode?: TTransitionMode;
+    /**
+     * Insert inline css style `z-index` to control the component positioning on the html layers.
+     */
+    zIndex?: string | number;
 };
 
 export declare type TBsModal = ComponentObjectPropsOptions<TModalOptionProps>;
diff --git a/src/components/Tooltip/mixins/tooltipApi.ts b/src/components/Tooltip/mixins/tooltipApi.ts
@@ -102,7 +102,7 @@ export function useSetTooltipPosition(
         return;
     }
 
-    const tooltipEl = <HTMLElement>tooltipRef.value;
+    const tooltipEl = tooltipRef.value as HTMLElement;
 
     if (tooltipEl && Helper.isFunction(tooltipEl.getBoundingClientRect)) {
         const elRect = tooltipEl.getBoundingClientRect();
@@ -125,38 +125,28 @@ export function useAddTooltipListener(
         return;
     }
 
-    let timer: number | undefined;
-    const showTooltip = (e: Event) => {
-        if (timer) {
-            clearTimeout(timer);
-        }
-
-        timer = Helper.defer(() => {
+    const showTooltip = (_e: Event) => {
+        window.requestAnimationFrame(() => {
             instance.emit('update:show', true);
             active.value = true;
-        }, 200);
-        // e.preventDefault();
-        e.stopPropagation();
+        })
+
+        // preventEventTarget(e);
     };
     const hideTooltip = () => {
-        if (timer) {
-            clearTimeout(timer);
-        }
-
         instance.emit('update:show', false);
         active.value = false;
     };
 
     const activatorEl = findActivatorElement(instance) as IHTMLElement | null;
 
     if (activatorEl) {
+        const options = {capture: true, passive: false};
         (activatorEl as IBindingElement).__mouseEvents = {
-            mouseEnter: EventListener.listen(activatorEl, 'mouseenter', showTooltip, {
-                passive: true,
-            }),
-            mouseLeave: EventListener.listen(activatorEl, 'mouseleave', hideTooltip, {
-                passive: true,
-            }),
+            mouseEnter: EventListener.listen(activatorEl, 'mouseenter', showTooltip, options),
+            mouseLeave: EventListener.listen(activatorEl, 'mouseleave', hideTooltip, options),
+            focus: EventListener.listen(activatorEl, 'focus', showTooltip),
+            blur: EventListener.listen(activatorEl, 'blur', hideTooltip),
         };
     }
 }
@@ -167,9 +157,11 @@ export function useRemoveTooltipListener(instance?: ComponentInternalInstance |
 
         if (activatorEl) {
             // @ts-ignore
-            const { mouseEnter, mouseLeave } = activatorEl.__mouseEvents;
+            const { mouseEnter, mouseLeave, focus, blur } = activatorEl.__mouseEvents;
             (mouseEnter as IEventResult).remove();
             (mouseLeave as IEventResult).remove();
+            (focus as IEventResult).remove();
+            (blur as IEventResult).remove();
             activatorEl.__mouseEvents = undefined;
         }
     }

Original file line number	Diff line number	Diff line change
`@@ -82,6 +82,7 @@ export function useRenderLightbox(`
`82`	`82`	`${cssPrefix}lightbox-wrap`,
`83`	`83`	props.overlay ? `${cssPrefix}lightbox-overlay` : '',
`84`	`84`	`],`
	`85`	`+ style: { 'z-index': props.zIndex },`
`85`	`86`	`},`
`86`	`87`	`[`
`87`	`88`	`createLightboxToolbar(`