@v-c/util 1.0.13 → 1.0.15

package/dist/Dom/focus.d.ts

@@ -7,11 +7,13 @@ export declare function triggerFocus(element?: HTMLInputElement | HTMLTextAreaEl
 /**
  * Lock focus in the element.
  * It will force back to the first focusable element when focus leaves the element.
+ * @param id - A stable ID for this lock instance
  */
-export declare function lockFocus(element: HTMLElement): VoidFunction;
+export declare function lockFocus(element: HTMLElement, id: string): VoidFunction;
 /**
  * Lock focus within an element.
  * When locked, focus will be restricted to focusable elements within the specified element.
  * If multiple elements are locked, only the last locked element will be effective.
+ * @returns A function to mark an element as ignored, which will temporarily allow focus on that element even if it's outside the locked area.
  */
-export declare function useLockFocus(lock: Ref<boolean>, getElement: () => HTMLElement | null): void;
+export declare function useLockFocus(lock: Ref<boolean>, getElement: () => HTMLElement | null): [ignoreElement: (ele: HTMLElement) => void];

package/dist/Dom/focus.js

@@ -1,3 +1,4 @@
+import useId_default from "../hooks/useId.js";
 import { getDOM } from "../dist/Dom/findDOMNode.js";
 import isVisible_default from "./isVisible.js";
 import { watch } from "vue";
@@ -46,9 +47,25 @@ function triggerFocus(element, option) {
 }
 var lastFocusElement = null;
 var focusElements = [];
+var idToElementMap = /* @__PURE__ */ new Map();
+var ignoredElementMap = /* @__PURE__ */ new Map();
 function getLastElement() {
 	return focusElements[focusElements.length - 1];
 }
+function isIgnoredElement(element) {
+	const lastElement = getLastElement();
+	if (element && lastElement) {
+		let lockId;
+		for (const [id, ele] of idToElementMap.entries()) if (ele === lastElement) {
+			lockId = id;
+			break;
+		}
+		if (!lockId) return false;
+		const ignoredEle = ignoredElementMap.get(lockId);
+		return !!ignoredEle && (ignoredEle === element || ignoredEle.contains(element));
+	}
+	return false;
+}
 function hasFocus(element) {
 	const { activeElement } = document;
 	return element === activeElement || element.contains(activeElement);
@@ -56,9 +73,10 @@ function hasFocus(element) {
 function syncFocus() {
 	const lastElement = getLastElement();
 	const { activeElement } = document;
+	if (isIgnoredElement(activeElement)) return;
 	if (lastElement && !hasFocus(lastElement)) {
 		const focusableList = getFocusNodeList(lastElement);
-		(focusableList.includes(lastFocusElement) ? lastFocusElement : focusableList[0])?.focus();
+		(focusableList.includes(lastFocusElement) ? lastFocusElement : focusableList[0])?.focus({ preventScroll: true });
 	} else lastFocusElement = activeElement;
 }
 function onWindowKeyDown(e) {
@@ -70,8 +88,9 @@ function onWindowKeyDown(e) {
 		else if (!e.shiftKey && activeElement === last) lastFocusElement = focusableList[0];
 	}
 }
-function lockFocus(element) {
+function lockFocus(element, id) {
 	if (element) {
+		idToElementMap.set(id, element);
 		focusElements = focusElements.filter((ele) => ele !== element);
 		focusElements.push(element);
 		window.addEventListener("focusin", syncFocus);
@@ -81,6 +100,8 @@ function lockFocus(element) {
 	return () => {
 		lastFocusElement = null;
 		focusElements = focusElements.filter((ele) => ele !== element);
+		idToElementMap.delete(id);
+		ignoredElementMap.delete(id);
 		if (focusElements.length === 0) {
 			window.removeEventListener("focusin", syncFocus);
 			window.removeEventListener("keydown", onWindowKeyDown, true);
@@ -88,12 +109,17 @@ function lockFocus(element) {
 	};
 }
 function useLockFocus(lock, getElement) {
+	const id = useId_default();
 	watch([lock, () => getElement()], ([nextLock, element], _o, onCleanup) => {
 		element = getDOM(element);
-		if (nextLock && element) onCleanup(lockFocus(element));
+		if (nextLock && element) onCleanup(lockFocus(element, id));
 	}, {
 		flush: "post",
 		immediate: true
 	});
+	const ignoreElement = (ele) => {
+		if (ele) ignoredElementMap.set(id, ele);
+	};
+	return [ignoreElement];
 }
 export { getFocusNodeList, lockFocus, triggerFocus, useLockFocus };

package/dist/getScrollBarSize.d.ts

@@ -1,5 +1,7 @@
-export default function getScrollBarSize(fresh?: boolean): number;
-export declare function getTargetScrollBarSize(target: HTMLElement): {
+interface ScrollBarSize {
     width: number;
     height: number;
-};
+}
+export default function getScrollBarSize(fresh?: boolean): number;
+export declare function getTargetScrollBarSize(target: HTMLElement): ScrollBarSize;
+export {};

package/dist/getScrollBarSize.js

@@ -1,53 +1,57 @@
+import { removeCSS, updateCSS } from "./Dom/dynamicCSS.js";
 var cached;
-function getScrollBarSize(fresh) {
-	if (typeof document === "undefined") return 0;
-	if (fresh || cached === void 0) {
-		const inner = document.createElement("div");
-		inner.style.width = "100%";
-		inner.style.height = "200px";
-		const outer = document.createElement("div");
-		const outerStyle = outer.style;
-		outerStyle.position = "absolute";
-		outerStyle.top = "0";
-		outerStyle.left = "0";
-		outerStyle.pointerEvents = "none";
-		outerStyle.visibility = "hidden";
-		outerStyle.width = "200px";
-		outerStyle.height = "150px";
-		outerStyle.overflow = "hidden";
-		outer.appendChild(inner);
-		document.body.appendChild(outer);
-		const widthContained = inner.offsetWidth;
-		outer.style.overflow = "scroll";
-		let widthScroll = inner.offsetWidth;
-		if (widthContained === widthScroll) widthScroll = outer.clientWidth;
-		document.body.removeChild(outer);
-		cached = widthContained - widthScroll;
+function measureScrollbarSize(ele) {
+	const randomId = `vc-scrollbar-measure-${Math.random().toString(36).substring(7)}`;
+	const measureEle = document.createElement("div");
+	measureEle.id = randomId;
+	const measureStyle = measureEle.style;
+	measureStyle.position = "absolute";
+	measureStyle.left = "0";
+	measureStyle.top = "0";
+	measureStyle.width = "100px";
+	measureStyle.height = "100px";
+	measureStyle.overflow = "scroll";
+	let fallbackWidth;
+	let fallbackHeight;
+	if (ele) {
+		const targetStyle = getComputedStyle(ele);
+		measureStyle.scrollbarColor = targetStyle.scrollbarColor;
+		measureStyle.scrollbarWidth = targetStyle.scrollbarWidth;
+		const webkitScrollbarStyle = getComputedStyle(ele, "::-webkit-scrollbar");
+		const width = parseInt(webkitScrollbarStyle.width, 10);
+		const height = parseInt(webkitScrollbarStyle.height, 10);
+		try {
+			updateCSS(`
+#${randomId}::-webkit-scrollbar {
+${width ? `width: ${webkitScrollbarStyle.width};` : ""}
+${height ? `height: ${webkitScrollbarStyle.height};` : ""}
+}`, randomId);
+		} catch (e) {
+			console.error(e);
+			fallbackWidth = width;
+			fallbackHeight = height;
+		}
 	}
-	return cached;
+	document.body.appendChild(measureEle);
+	const scrollWidth = ele && fallbackWidth && !Number.isNaN(fallbackWidth) ? fallbackWidth : measureEle.offsetWidth - measureEle.clientWidth;
+	const scrollHeight = ele && fallbackHeight && !Number.isNaN(fallbackHeight) ? fallbackHeight : measureEle.offsetHeight - measureEle.clientHeight;
+	document.body.removeChild(measureEle);
+	removeCSS(randomId);
+	return {
+		width: scrollWidth,
+		height: scrollHeight
+	};
 }
-function ensureSize(str) {
-	const match = str.match(/^(.*)px$/);
-	const value = Number(match?.[1]);
-	return Number.isNaN(value) ? getScrollBarSize() : value;
+function getScrollBarSize(fresh) {
+	if (typeof document === "undefined") return 0;
+	if (fresh || cached === void 0) cached = measureScrollbarSize();
+	return cached.width;
 }
 function getTargetScrollBarSize(target) {
 	if (typeof document === "undefined" || !target || !(target instanceof Element)) return {
 		width: 0,
 		height: 0
 	};
-	if (typeof navigator !== "undefined" && /jsdom/i.test(navigator.userAgent)) return {
-		width: 0,
-		height: 0
-	};
-	let width = "0px";
-	let height = "0px";
-	try {
-		({width, height} = getComputedStyle(target, "::-webkit-scrollbar"));
-	} catch {}
-	return {
-		width: ensureSize(width),
-		height: ensureSize(height)
-	};
+	return measureScrollbarSize(target);
 }
 export { getScrollBarSize as default, getTargetScrollBarSize };

package/dist/hooks/useEvent.d.ts

@@ -1 +1,2 @@
-export default function useEvent<T extends Function>(callback: T): T;
+declare const useEvent: <T extends Function>(callback: T) => T;
+export default useEvent;

package/dist/hooks/useEvent.js

@@ -1,4 +1,5 @@
-function useEvent(callback) {
+var useEvent = (callback) => {
 	return callback;
-}
-export { useEvent as default };
+};
+var useEvent_default = useEvent;
+export { useEvent_default as default };

package/dist/hooks/useId.d.ts

@@ -1 +1,9 @@
 export default function (id?: string): string;
+/**
+ * Generate a valid HTML id from prefix and key.
+ * Sanitizes the key by replacing invalid characters with hyphens.
+ * @param prefix - The prefix for the id
+ * @param key - The element key, may contain spaces or invalid characters
+ * @returns A valid HTML id string
+ */
+export declare function getId(prefix: string, key: string | number): string;

package/dist/hooks/useId.js

@@ -9,4 +9,7 @@ function useId_default(id) {
 	if (process.env.NODE_ENV === "test") return "test-id";
 	return vueId;
 }
-export { useId_default as default };
+function getId(prefix, key) {
+	return `${prefix}-${String(key).replace(/[^a-zA-Z0-9_.:-]/g, "-")}`;
+}
+export { useId_default as default, getId };

package/dist/isMobile.d.ts

@@ -1,2 +1,2 @@
-declare const _default: () => boolean;
-export default _default;
+declare const getIsMobile: () => boolean;
+export default getIsMobile;

package/dist/isMobile.js

@@ -1,6 +1,7 @@
-var isMobile_default = () => {
+var getIsMobile = () => {
 	if (typeof navigator === "undefined" || typeof window === "undefined") return false;
 	const agent = navigator.userAgent || navigator.vendor || window.opera;
 	return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(agent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-([mpt])|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c([\- _agpst])|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac([ \-/])|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/([klu])|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t([\- ov])|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[23]|n30(0|2)|n50([025])|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan([adt])|pdxg|pg(13|-([1-8c]))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c([\-01])|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(agent?.substr(0, 4));
 };
+var isMobile_default = getIsMobile;
 export { isMobile_default as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/util",
   "type": "module",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "Vue3 components utils",
   "publishConfig": {
     "access": "public"