@zhencai/vue-focus-scope 1.0.1 → 1.0.3

package/index.js

@@ -1,107 +1,73 @@
-import { createElementBlock, defineComponent, onMounted, onUnmounted, openBlock, ref, renderSlot } from "vue";
+import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, defineComponent as r, openBlock as i, renderSlot as a, useTemplateRef as o } from "vue";
 //#region src/components/FocusScope.vue?vue&type=script&setup=true&lang.ts
-var selector = "a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex='-1']),[contenteditable='true']";
-var FocusScope_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var s = {
+	key: 0,
+	tabindex: "0"
+}, c = /* @__PURE__ */ r({
 	__name: "FocusScope",
-	props: {
-		autoFocus: {
-			type: [String, Boolean],
-			default: "first"
-		},
-		tabMode: { default: "loop" }
-	},
-	setup(__props) {
-		const props = __props;
-		const scopeRef = ref(null);
-		let active = false;
-		let previous = null;
-		const getFocusable = () => {
-			if (!scopeRef.value) return [];
-			return [...scopeRef.value.querySelectorAll(selector)];
-		};
-		const focusFirst = () => {
-			getFocusable()[0]?.focus();
-		};
-		const focusLast = () => {
-			const list = getFocusable();
-			list[list.length - 1]?.focus();
-		};
-		const handleMouseDown = () => {
-			scopeRef.value?.focus();
-		};
-		const handleKeydown = (e) => {
-			if (!active) return;
-			if (e.key !== "Tab") return;
-			if (!scopeRef.value) return;
-			const list = getFocusable();
-			if (!list.length) return;
-			const first = list[0];
-			const last = list[list.length - 1];
-			const current = document.activeElement;
-			if (e.shiftKey) {
-				if (current === first) {
-					e.preventDefault();
-					if (props.tabMode === "loop") last.focus();
-					else scopeRef.value.focus();
-				} else if (current === scopeRef.value) {
-					e.preventDefault();
-					last.focus();
+	props: { tabMode: { default: "loop" } },
+	setup(r) {
+		let c = o("wrapper");
+		function l(e) {
+			if (!e) return [];
+			let t = Array.from(e.querySelectorAll("a[href]:not([tabindex=\"-1\"]):not(.sentinel-start):not(.sentinel-end),       button:not([tabindex=\"-1\"]):not([disabled]):not(.sentinel-start):not(.sentinel-end),       input:not([tabindex=\"-1\"]):not([disabled]):not(.sentinel-start):not(.sentinel-end),       select:not([tabindex=\"-1\"]):not([disabled]):not(.sentinel-start):not(.sentinel-end),       textarea:not([tabindex=\"-1\"]):not([disabled]):not(.sentinel-start):not(.sentinel-end),       [tabindex]:not([tabindex=\"-1\"]):not(.sentinel-start):not(.sentinel-end)")).filter((e) => {
+				let t = e.parentElement;
+				for (; t;) {
+					if (t.tagName === "FIELDSET" && t.disabled) return !1;
+					t = t.parentElement;
 				}
-			} else if (current === last) {
-				e.preventDefault();
-				if (props.tabMode === "loop") first.focus();
-				else scopeRef.value.focus();
-			} else if (current === scopeRef.value) {
-				e.preventDefault();
-				first.focus();
+				return !0;
+			});
+			return console.log("当前可聚焦元素：", t), t;
+		}
+		function u() {
+			try {
+				if (c.value) {
+					let e = l(c.value);
+					if (e.length === 0) return;
+					console.log("执行聚焦第一个：", e[0]), e[0].focus();
+				}
+			} catch (e) {
+				console.error("focusFirst error:", e);
+			}
+		}
+		function d() {
+			if (c.value) {
+				let e = l(c.value);
+				if (e.length === 0) return;
+				e[e.length - 1].focus();
+			}
+		}
+		function f(e) {
+			if (!c.value) return;
+			let t = e.relatedTarget;
+			if (!(t instanceof Node)) {
+				u();
+				return;
 			}
-		};
-		const activate = () => {
-			if (!scopeRef.value) return;
-			active = true;
-			previous = document.activeElement;
-			if (props.autoFocus === "first") focusFirst();
-			if (props.autoFocus === "last") focusLast();
-		};
-		const deactivate = () => {
-			active = false;
-			if (previous && document.body.contains(previous)) previous.focus();
-			previous = null;
-		};
-		onMounted(() => {
-			document.addEventListener("keydown", handleKeydown);
-			activate();
-		});
-		onUnmounted(() => {
-			document.removeEventListener("keydown", handleKeydown);
-			deactivate();
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				ref_key: "scopeRef",
-				ref: scopeRef,
-				tabindex: "-1",
-				onMousedown: handleMouseDown,
-				"data-focus-scope": ""
-			}, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 544);
-		};
+			c.value.contains(t) ? d() : u();
+		}
+		function p() {
+			u();
+		}
+		return (o, l) => (i(), t("div", {
+			ref_key: "wrapper",
+			ref: c
+		}, [
+			n("div", {
+				tabindex: "0",
+				class: "sentinel-start",
+				onFocus: f
+			}, null, 32),
+			a(o.$slots, "default"),
+			r.tabMode === "soft-loop" ? (i(), t("div", s)) : e("", !0),
+			n("div", {
+				tabindex: "0",
+				class: "sentinel-end",
+				onFocus: p
+			}, null, 32)
+		], 512));
 	}
 });
 //#endregion
-//#region \0plugin-vue:export-helper
-var _plugin_vue_export_helper_default = (sfc, props) => {
-	const target = sfc.__vccOpts || sfc;
-	for (const [key, val] of props) target[key] = val;
-	return target;
-};
-//#endregion
-//#region src/components/FocusScope.vue
-var FocusScope_default = /* @__PURE__ */ _plugin_vue_export_helper_default(FocusScope_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-5ffda61b"]]);
-//#endregion
-//#region src/index.ts
-var src_default = FocusScope_default;
-
-//#endregion
-export { FocusScope_default as FocusScope, src_default as default };
-
-//# sourceMappingURL=index.js.map
+export { c as FocusScope };

package/package.json

@@ -1,22 +1,9 @@
 {
     "name": "@zhencai/vue-focus-scope",
-    "version": "1.0.1",
     "main": "index.js",
-    "types": "index.d.ts",
-    "files": [
-        "index.js",
-        "index.d.ts",
-        "vue-focus-scope.css"
-    ],
-    "keywords": [
-        "vue",
-        "focus",
-        "ui",
-        "component"
-    ],
-    "author": "严硕",
-    "license": "MIT",
+    "version": "1.0.3",
+    "module": "index.js",
     "peerDependencies": {
-        "vue": "^3.2.0"
+        "vue": "^3.0.0"
     }
 }

package/index.d.ts

@@ -1,30 +0,0 @@
-// index.d.ts
-import { DefineComponent } from "vue";
-
-type TabMode = "loop" | "loop-sentinel";
-
-interface FocusScopeProps {
-    autoFocus?: "first" | "last" | false;
-    tabMode?: TabMode;
-}
-
-export interface FocusScopeExpose {
-    activate: () => void;
-    deactivate: () => void;
-    focusFirst: () => void;
-    focusLast: () => void;
-}
-
-declare const FocusScope: DefineComponent<
-    FocusScopeProps,
-    {},
-    {},
-    {},
-    {},
-    {},
-    {},
-    {},
-    FocusScopeExpose
->;
-
-export default FocusScope;

package/vue-focus-scope.css

@@ -1,5 +0,0 @@
-
-[data-focus-scope][data-v-5ffda61b]:focus {
-  outline: none;
-}
-/*$vite$:1*/