@v-c/util 1.0.6 → 1.0.8

package/dist/Dom/dynamicCSS.cjs

@@ -51,6 +51,7 @@ function findExistNode(key, option = {}) {
 	return findStyles(getContainer(option)).find((node) => node.getAttribute(getMark(option)) === key);
 }
 function removeCSS(key, option = {}) {
+	if (!require_canUseDom.default()) return null;
 	const existNode = findExistNode(key, option);
 	if (existNode) getContainer(option).removeChild(existNode);
 }
@@ -67,6 +68,7 @@ function clearContainerCache() {
 	containerCache.clear();
 }
 function updateCSS(css, key, option = {}) {
+	if (!require_canUseDom.default()) return null;
 	syncRealContainer(getContainer(option), option);
 	const existNode = findExistNode(key, option);
 	if (existNode) {

package/dist/Dom/dynamicCSS.d.ts

@@ -15,7 +15,7 @@ interface Options {
     mark?: string;
 }
 export declare function injectCSS(css: string, option?: Options): HTMLStyleElement;
-export declare function removeCSS(key: string, option?: Options): void;
+export declare function removeCSS(key: string, option?: Options): any;
 /**
  * manually clear container cache to avoid global cache in unit testes
  */

package/dist/Dom/dynamicCSS.js

@@ -50,6 +50,7 @@ function findExistNode(key, option = {}) {
 	return findStyles(getContainer(option)).find((node) => node.getAttribute(getMark(option)) === key);
 }
 function removeCSS(key, option = {}) {
+	if (!canUseDom()) return null;
 	const existNode = findExistNode(key, option);
 	if (existNode) getContainer(option).removeChild(existNode);
 }
@@ -66,6 +67,7 @@ function clearContainerCache() {
 	containerCache.clear();
 }
 function updateCSS(css, key, option = {}) {
+	if (!canUseDom()) return null;
 	syncRealContainer(getContainer(option), option);
 	const existNode = findExistNode(key, option);
 	if (existNode) {

package/dist/Dom/focus.cjs

@@ -1,5 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_isVisible = require("./isVisible.cjs");
+let vue = require("vue");
 function focusable(node, includePositive = false) {
 	if (require_isVisible.default(node)) {
 		const nodeName = node.nodeName.toLowerCase();
@@ -26,27 +27,6 @@ function getFocusNodeList(node, includePositive = false) {
 	if (focusable(node, includePositive)) res.unshift(node);
 	return res;
 }
-var lastFocusElement = null;
-function saveLastFocusNode() {
-	lastFocusElement = document.activeElement;
-}
-function clearLastFocusNode() {
-	lastFocusElement = null;
-}
-function backLastFocusNode() {
-	if (lastFocusElement) try {
-		lastFocusElement.focus();
-	} catch (_e) {}
-}
-function limitTabRange(node, e) {
-	if (e.keyCode === 9) {
-		const tabNodeList = getFocusNodeList(node);
-		if (tabNodeList[e.shiftKey ? 0 : tabNodeList.length - 1] === document.activeElement || node === document.activeElement) {
-			tabNodeList[e.shiftKey ? tabNodeList.length - 1 : 0].focus();
-			e.preventDefault();
-		}
-	}
-}
 function triggerFocus(element, option) {
 	if (!element) return;
 	element.focus(option);
@@ -64,9 +44,58 @@ function triggerFocus(element, option) {
 		}
 	}
 }
-exports.backLastFocusNode = backLastFocusNode;
-exports.clearLastFocusNode = clearLastFocusNode;
+var lastFocusElement = null;
+var focusElements = [];
+function getLastElement() {
+	return focusElements[focusElements.length - 1];
+}
+function hasFocus(element) {
+	const { activeElement } = document;
+	return element === activeElement || element.contains(activeElement);
+}
+function syncFocus() {
+	const lastElement = getLastElement();
+	const { activeElement } = document;
+	if (lastElement && !hasFocus(lastElement)) {
+		const focusableList = getFocusNodeList(lastElement);
+		(focusableList.includes(lastFocusElement) ? lastFocusElement : focusableList[0])?.focus();
+	} else lastFocusElement = activeElement;
+}
+function onWindowKeyDown(e) {
+	if (e.key === "Tab") {
+		const { activeElement } = document;
+		const focusableList = getFocusNodeList(getLastElement());
+		const last = focusableList[focusableList.length - 1];
+		if (e.shiftKey && activeElement === focusableList[0]) lastFocusElement = last;
+		else if (!e.shiftKey && activeElement === last) lastFocusElement = focusableList[0];
+	}
+}
+function lockFocus(element) {
+	if (element) {
+		focusElements = focusElements.filter((ele) => ele !== element);
+		focusElements.push(element);
+		window.addEventListener("focusin", syncFocus);
+		window.addEventListener("keydown", onWindowKeyDown, true);
+		syncFocus();
+	}
+	return () => {
+		lastFocusElement = null;
+		focusElements = focusElements.filter((ele) => ele !== element);
+		if (focusElements.length === 0) {
+			window.removeEventListener("focusin", syncFocus);
+			window.removeEventListener("keydown", onWindowKeyDown, true);
+		}
+	};
+}
+function useLockFocus(lock, getElement) {
+	(0, vue.watch)(lock, (_, _o, onCleanup) => {
+		if (lock.value) {
+			const element = getElement();
+			if (element) onCleanup(lockFocus(element));
+		}
+	});
+}
 exports.getFocusNodeList = getFocusNodeList;
-exports.limitTabRange = limitTabRange;
-exports.saveLastFocusNode = saveLastFocusNode;
+exports.lockFocus = lockFocus;
 exports.triggerFocus = triggerFocus;
+exports.useLockFocus = useLockFocus;

package/dist/Dom/focus.d.ts

@@ -1,12 +1,17 @@
+import { Ref } from 'vue';
 export declare function getFocusNodeList(node: HTMLElement, includePositive?: boolean): HTMLElement[];
-/** @deprecated Do not use since this may failed when used in async */
-export declare function saveLastFocusNode(): void;
-/** @deprecated Do not use since this may failed when used in async */
-export declare function clearLastFocusNode(): void;
-/** @deprecated Do not use since this may failed when used in async */
-export declare function backLastFocusNode(): void;
-export declare function limitTabRange(node: HTMLElement, e: KeyboardEvent): void;
 export interface InputFocusOptions extends FocusOptions {
     cursor?: 'start' | 'end' | 'all';
 }
 export declare function triggerFocus(element?: HTMLInputElement | HTMLTextAreaElement, option?: InputFocusOptions): void;
+/**
+ * Lock focus in the element.
+ * It will force back to the first focusable element when focus leaves the element.
+ */
+export declare function lockFocus(element: HTMLElement): 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.
+ */
+export declare function useLockFocus(lock: Ref<boolean>, getElement: () => HTMLElement | null): void;

package/dist/Dom/focus.js

@@ -1,4 +1,5 @@
 import isVisible_default from "./isVisible.js";
+import { watch } from "vue";
 function focusable(node, includePositive = false) {
 	if (isVisible_default(node)) {
 		const nodeName = node.nodeName.toLowerCase();
@@ -25,27 +26,6 @@ function getFocusNodeList(node, includePositive = false) {
 	if (focusable(node, includePositive)) res.unshift(node);
 	return res;
 }
-var lastFocusElement = null;
-function saveLastFocusNode() {
-	lastFocusElement = document.activeElement;
-}
-function clearLastFocusNode() {
-	lastFocusElement = null;
-}
-function backLastFocusNode() {
-	if (lastFocusElement) try {
-		lastFocusElement.focus();
-	} catch (_e) {}
-}
-function limitTabRange(node, e) {
-	if (e.keyCode === 9) {
-		const tabNodeList = getFocusNodeList(node);
-		if (tabNodeList[e.shiftKey ? 0 : tabNodeList.length - 1] === document.activeElement || node === document.activeElement) {
-			tabNodeList[e.shiftKey ? tabNodeList.length - 1 : 0].focus();
-			e.preventDefault();
-		}
-	}
-}
 function triggerFocus(element, option) {
 	if (!element) return;
 	element.focus(option);
@@ -63,4 +43,55 @@ function triggerFocus(element, option) {
 		}
 	}
 }
-export { backLastFocusNode, clearLastFocusNode, getFocusNodeList, limitTabRange, saveLastFocusNode, triggerFocus };
+var lastFocusElement = null;
+var focusElements = [];
+function getLastElement() {
+	return focusElements[focusElements.length - 1];
+}
+function hasFocus(element) {
+	const { activeElement } = document;
+	return element === activeElement || element.contains(activeElement);
+}
+function syncFocus() {
+	const lastElement = getLastElement();
+	const { activeElement } = document;
+	if (lastElement && !hasFocus(lastElement)) {
+		const focusableList = getFocusNodeList(lastElement);
+		(focusableList.includes(lastFocusElement) ? lastFocusElement : focusableList[0])?.focus();
+	} else lastFocusElement = activeElement;
+}
+function onWindowKeyDown(e) {
+	if (e.key === "Tab") {
+		const { activeElement } = document;
+		const focusableList = getFocusNodeList(getLastElement());
+		const last = focusableList[focusableList.length - 1];
+		if (e.shiftKey && activeElement === focusableList[0]) lastFocusElement = last;
+		else if (!e.shiftKey && activeElement === last) lastFocusElement = focusableList[0];
+	}
+}
+function lockFocus(element) {
+	if (element) {
+		focusElements = focusElements.filter((ele) => ele !== element);
+		focusElements.push(element);
+		window.addEventListener("focusin", syncFocus);
+		window.addEventListener("keydown", onWindowKeyDown, true);
+		syncFocus();
+	}
+	return () => {
+		lastFocusElement = null;
+		focusElements = focusElements.filter((ele) => ele !== element);
+		if (focusElements.length === 0) {
+			window.removeEventListener("focusin", syncFocus);
+			window.removeEventListener("keydown", onWindowKeyDown, true);
+		}
+	};
+}
+function useLockFocus(lock, getElement) {
+	watch(lock, (_, _o, onCleanup) => {
+		if (lock.value) {
+			const element = getElement();
+			if (element) onCleanup(lockFocus(element));
+		}
+	});
+}
+export { getFocusNodeList, lockFocus, triggerFocus, useLockFocus };

package/dist/index.cjs

@@ -1,12 +1,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_KeyCode = require("./KeyCode.cjs");
+const require_raf = require("./raf.cjs");
 const require_omit = require("./omit.cjs");
 const require_RenderComponent = require("./RenderComponent.cjs");
 const require_classnames = require("./classnames.cjs");
-const require_get = require("./utils/get.cjs");
-const require_set = require("./utils/set.cjs");
 const require_useId = require("./hooks/useId.cjs");
 const require_useMergedState = require("./hooks/useMergedState.cjs");
+const require_get = require("./utils/get.cjs");
+const require_set = require("./utils/set.cjs");
 const require_warning = require("./warning.cjs");
 exports.KeyCode = require_KeyCode.default;
 exports.RenderComponent = require_RenderComponent.default;
@@ -14,6 +15,7 @@ exports.classNames = require_classnames.default;
 exports.clsx = require_classnames.clsx;
 exports.get = require_get.default;
 exports.omit = require_omit.default;
+exports.raf = require_raf.default;
 exports.set = require_set.default;
 exports.useId = require_useId.default;
 exports.useMergedState = require_useMergedState.default;

package/dist/index.d.ts

@@ -1,10 +1,11 @@
 export { default as classNames, clsx } from './classnames';
-export { default as RenderComponent } from './RenderComponent';
+export { default as useId } from './hooks/useId';
+export { default as useMergedState } from './hooks/useMergedState';
 export { default as KeyCode } from './KeyCode';
 export { default as omit } from './omit';
+export { default as raf } from './raf';
+export { default as RenderComponent } from './RenderComponent';
+export type { VueNode } from './type';
 export { default as get } from './utils/get';
 export { default as set } from './utils/set';
-export { default as useId } from './hooks/useId';
-export { default as useMergedState } from './hooks/useMergedState';
 export { default as warning } from './warning';
-export type { VueNode } from './type';

package/dist/index.js

@@ -1,10 +1,11 @@
 import KeyCode_default from "./KeyCode.js";
+import raf_default from "./raf.js";
 import omit from "./omit.js";
 import RenderComponent_default from "./RenderComponent.js";
 import classNames, { clsx } from "./classnames.js";
-import get from "./utils/get.js";
-import set from "./utils/set.js";
 import useId_default from "./hooks/useId.js";
 import useMergedState from "./hooks/useMergedState.js";
+import get from "./utils/get.js";
+import set from "./utils/set.js";
 import warning_default from "./warning.js";
-export { KeyCode_default as KeyCode, RenderComponent_default as RenderComponent, classNames, clsx, get, omit, set, useId_default as useId, useMergedState, warning_default as warning };
+export { KeyCode_default as KeyCode, RenderComponent_default as RenderComponent, classNames, clsx, get, omit, raf_default as raf, set, useId_default as useId, useMergedState, warning_default as warning };

package/package.json

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