v-uixy 1.9.1 → 1.9.3

package/templates/composables/useGpuAcceleration.ts

@@ -0,0 +1,79 @@
+import { onMounted } from "vue";
+
+const GPU_ATTRIBUTE = "data-uixy-gpu";
+const IDLE_TIMEOUT_MS = 2000;
+const FALLBACK_DELAY_MS = 200;
+
+const SOFTWARE_RENDERER_PATTERN =
+  /swiftshader|llvmpipe|softpipe|software|basic render/i;
+
+let cachedResult: boolean | null = null;
+let isDetectionScheduled = false;
+
+const createWebGlContext = (): WebGLRenderingContext | null => {
+  const canvas = document.createElement("canvas");
+  const options = { failIfMajorPerformanceCaveat: true };
+
+  return (canvas.getContext("webgl2", options) ??
+    canvas.getContext("webgl", options)) as WebGLRenderingContext | null;
+};
+
+const getRendererName = (gl: WebGLRenderingContext): string => {
+  const info = gl.getExtension("WEBGL_debug_renderer_info");
+
+  return info ? String(gl.getParameter(info.UNMASKED_RENDERER_WEBGL)) : "";
+};
+
+const checkGpuAcceleration = (): boolean => {
+  try {
+    const gl = createWebGlContext();
+
+    if (!gl) return false;
+
+    const isHardwareRenderer = !SOFTWARE_RENDERER_PATTERN.test(
+      getRendererName(gl),
+    );
+
+    gl.getExtension("WEBGL_lose_context")?.loseContext();
+
+    return isHardwareRenderer;
+  } catch {
+    return false;
+  }
+};
+
+export const detectGpuAcceleration = (): boolean => {
+  if (typeof document === "undefined") return false;
+
+  cachedResult ??= checkGpuAcceleration();
+
+  return cachedResult;
+};
+
+const applyGpuAttribute = () => {
+  const value = detectGpuAcceleration() ? "on" : "off";
+
+  document.documentElement.setAttribute(GPU_ATTRIBUTE, value);
+};
+
+const runWhenIdle = (callback: () => void) => {
+  if ("requestIdleCallback" in window) {
+    window.requestIdleCallback(callback, { timeout: IDLE_TIMEOUT_MS });
+    return;
+  }
+
+  setTimeout(callback, FALLBACK_DELAY_MS);
+};
+
+export function useGpuAcceleration() {
+  onMounted(() => {
+    if (
+      isDetectionScheduled ||
+      document.documentElement.hasAttribute(GPU_ATTRIBUTE)
+    )
+      return;
+
+    isDetectionScheduled = true;
+    runWhenIdle(applyGpuAttribute);
+  });
+}

package/templates/composables/useOverlayLayer.ts

@@ -1,73 +1,123 @@
 import { computed, nextTick, onScopeDispose, ref, type ComputedRef } from "vue";
 
+const PAGE_ANCHORED_Z = 30;
 const BASE_Z = 60;
 const STEP_Z = 10;
 
+const MANAGED_ATTR = "data-uixy-inert-managed";
+const OVERLAY_ATTR = "data-uixy-overlay";
+export const MODAL_ATTR = "data-uixy-modal";
+export const MODAL_ID_ATTR = "data-uixy-modal-id";
+
 let seq = 0;
 
 const layers = ref<number[]>([]);
 
+const modalStack = ref<number[]>([]);
+
+const zOf = (el: Element): number => {
+  const raw = window.getComputedStyle(el).zIndex;
+  const parsed = Number.parseInt(raw ?? "", 10);
+
+  return Number.isFinite(parsed) ? parsed : 0;
+};
+
+const hasPinnedAncestor = (el: HTMLElement | null): boolean => {
+  while (el) {
+    const { position } = window.getComputedStyle(el);
+
+    if (position === "fixed" || position === "sticky") return true;
+
+    el = el.parentElement;
+  }
+
+  return false;
+};
+
+const isAnchoredToPage = (anchor: HTMLElement): boolean => {
+  const overlay = anchor.closest(`[${OVERLAY_ATTR}]`);
+
+  if (overlay && zOf(overlay) > PAGE_ANCHORED_Z) return false;
+
+  return !hasPinnedAncestor(anchor);
+};
+
 export interface UseOverlayLayerReturn {
   id: number;
   zIndex: ComputedRef<number>;
   isTop: ComputedRef<boolean>;
   isActive: ComputedRef<boolean>;
-  acquire: () => void;
+  acquire: (anchor?: HTMLElement | null) => void;
   release: () => void;
 }
 
 export function useOverlayLayer(): UseOverlayLayerReturn {
   const id = ++seq;
 
+  const pageAnchored = ref(false);
+
   const index = computed(() => layers.value.indexOf(id));
   const isActive = computed(() => index.value !== -1);
 
-  const zIndex = computed(() =>
-    isActive.value ? BASE_Z + (index.value + 1) * STEP_Z : BASE_Z + STEP_Z,
-  );
+  const zIndex = computed(() => {
+    if (pageAnchored.value) return PAGE_ANCHORED_Z;
+
+    const position = isActive.value ? index.value + 1 : 1;
+
+    return BASE_Z + position * STEP_Z;
+  });
 
   const isTop = computed(
     () => isActive.value && index.value === layers.value.length - 1,
   );
 
-  const acquire = () => {
-    if (!layers.value.includes(id)) layers.value = [...layers.value, id];
-  };
-
   const release = () => {
-    if (layers.value.includes(id))
+    pageAnchored.value = false;
+
+    if (layers.value.includes(id)) {
       layers.value = layers.value.filter((x) => x !== id);
+    }
   };
 
-  onScopeDispose(release);
+  const acquire = (anchor?: HTMLElement | null) => {
+    if (anchor && isAnchoredToPage(anchor)) {
+      release();
 
-  return { id, zIndex, isTop, isActive, acquire, release };
-}
+      pageAnchored.value = true;
 
-const MANAGED_ATTR = "data-uixy-inert-managed";
-const OVERLAY_ATTR = "data-uixy-overlay";
-export const MODAL_ATTR = "data-uixy-modal";
-export const MODAL_ID_ATTR = "data-uixy-modal-id";
+      return;
+    }
 
-const modalStack = ref<number[]>([]);
+    pageAnchored.value = false;
 
-const zOf = (el: Element): number => {
-  const raw = window.getComputedStyle(el).zIndex;
-  const parsed = Number.parseInt(raw ?? "", 10);
-  return Number.isFinite(parsed) ? parsed : 0;
-};
+    if (!layers.value.includes(id)) {
+      layers.value = [...layers.value, id];
+    }
+  };
+
+  onScopeDispose(release);
+
+  return { id, zIndex, isTop, isActive, acquire, release };
+}
 
 export const getTopModalEl = (): HTMLElement | null => {
   if (typeof document === "undefined") return null;
-  const els = Array.from(
+
+  const modals = Array.from(
     document.querySelectorAll<HTMLElement>(`[${MODAL_ATTR}]`),
-  ).filter((el) => {
-    const raw = el.getAttribute(MODAL_ID_ATTR);
-    if (raw === null) return true;
-    return modalStack.value.includes(Number(raw));
+  );
+
+  const openModals = modals.filter((el) => {
+    const rawId = el.getAttribute(MODAL_ID_ATTR);
+
+    if (rawId === null) return true;
+
+    return modalStack.value.includes(Number(rawId));
   });
-  if (els.length === 0) return null;
-  return els.reduce((a, b) => (zOf(b) >= zOf(a) ? b : a));
+
+  if (openModals.length === 0) return null;
+
+  return openModals.reduce((a, b) => (zOf(b) >= zOf(a) ? b : a));
 };
 
 function reconcileInert() {
@@ -80,6 +130,7 @@ function reconcileInert() {
   });
 
   const topEl = getTopModalEl();
+
   if (!topEl) return;
 
   const topZ = zOf(topEl);
@@ -87,7 +138,6 @@ function reconcileInert() {
   Array.from(document.body.children).forEach((el) => {
     if (!(el instanceof HTMLElement)) return;
     if (el === topEl || el.contains(topEl)) return;
-
     if (el.hasAttribute(OVERLAY_ATTR) && zOf(el) > topZ) return;
 
     el.setAttribute("inert", "");
@@ -113,14 +163,19 @@ export function useModalLayer(): UseModalLayerReturn {
 
   const open = () => {
     layer.acquire();
-    if (!modalStack.value.includes(layer.id))
+
+    if (!modalStack.value.includes(layer.id)) {
       modalStack.value = [...modalStack.value, layer.id];
+    }
+
     nextTick(reconcileInert);
   };
 
   const close = () => {
     layer.release();
+
     modalStack.value = modalStack.value.filter((x) => x !== layer.id);
+
     reconcileInert();
     nextTick(reconcileInert);
   };

package/templates/composables/usePosition.ts

@@ -118,7 +118,7 @@ export function usePosition({
     [active, () => direction, () => align],
     ([isActive]) => {
       if (isActive) {
-        acquire();
+        acquire(target.value);
         updatePosition();
         observeResize();
         window.addEventListener("resize", updatePosition);