@zhencai/vue-focus-scope 1.0.0

package/index.d.ts

@@ -0,0 +1,29 @@
+// 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/index.js

@@ -0,0 +1,107 @@
+import { createElementBlock, defineComponent, onMounted, onUnmounted, openBlock, ref, renderSlot } 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({
+	__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();
+				}
+			} 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();
+			}
+		};
+		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);
+		};
+	}
+});
+//#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

package/package.json

@@ -0,0 +1,22 @@
+{
+    "name": "@zhencai/vue-focus-scope",
+    "version": "1.0.0",
+    "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",
+    "peerDependencies": {
+        "vue": "^3.2.0"
+    }
+}

package/vue-focus-scope.css

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