@composy/keyboard-vue 0.0.1 → 0.0.2

package/dist/index.js

@@ -2,7 +2,7 @@
 * ***********************************
 * @composy/keyboard-vue v0.0.1    *
 * Built with rollup               *
-* Build time: 2024-08-17 11:42:14 *
+* Build time: 2024-10-12 17:44:16 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************
@@ -12,7 +12,7 @@
 		"exports",
 		"vue",
 		"@composy/keyboard-core"
-	], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.LDesignPackagesVue3 = {}, global.Vue, global.ComposyKeyboardCore));
+	], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.LDesignKeyboardVue = {}, global.Vue, global.ComposyKeyboardCore));
 })(this, function(exports, vue, _composy_keyboard_core) {
 	Object.defineProperties(exports, {
 		__esModule: { value: true },
@@ -27,6 +27,10 @@
 	};
 	const _hoisted_4$2 = {
 		key: 2,
+		class: "keyboard-key__label"
+	};
+	const _hoisted_5$1 = {
+		key: 3,
 		class: "keyboard-key__arrow-inline"
 	};
 	var KeyboardKey_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -58,6 +62,10 @@
 				if (typeof keyLabel === "string") return keyLabel;
 				return props.isUpperCase ? keyLabel.upper : keyLabel.lower;
 			});
+			const iconMarkup = (0, vue.computed)(() => {
+				const icon = props.keyDef.icon;
+				return icon ? (0, _composy_keyboard_core.sanitizeSvgIcon)(icon) : "";
+			});
 			const keyWidth = (0, vue.computed)(() => {
 				if (props.useFlex) return;
 				const base = props.baseWidth ?? 36;
@@ -86,7 +94,7 @@
 				event.stopPropagation();
 				if (props.keyDef.disabled) return;
 				if (isOptionsOnly.value) {
-					emit("showOptions", props.keyDef.options);
+					emit("showOptions", props.keyDef.options ?? []);
 					return;
 				}
 				emit("press", props.keyDef);
@@ -95,7 +103,7 @@
 				event.preventDefault();
 				event.stopPropagation();
 				if (props.keyDef.disabled) return;
-				if (hasOptions.value) emit("showOptions", props.keyDef.options);
+				if (hasOptions.value) emit("showOptions", props.keyDef.options ?? []);
 			};
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
@@ -116,13 +124,13 @@
 						onTouchstart: (0, vue.withModifiers)(handlePress, ["prevent"])
 					}, [
 						(0, vue.createCommentVNode)(" SVG 图标支持 "),
-						__props.keyDef.icon ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+						iconMarkup.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 							key: 0,
 							class: "keyboard-key__icon",
-							innerHTML: __props.keyDef.icon
-						}, null, 8, _hoisted_2$2)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$2, (0, vue.toDisplayString)(label.value), 1)),
+							innerHTML: iconMarkup.value
+						}, null, 8, _hoisted_2$2)) : __props.keyDef.icon ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$2, (0, vue.toDisplayString)(__props.keyDef.icon), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_4$2, (0, vue.toDisplayString)(label.value), 1)),
 						(0, vue.createCommentVNode)(" 纯选项按钮内嵌下拉箭头 "),
-						isOptionsOnly.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_4$2, "▼")) : (0, vue.createCommentVNode)("v-if", true)
+						isOptionsOnly.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_5$1, "▼")) : (0, vue.createCommentVNode)("v-if", true)
 					], 42, _hoisted_1$2),
 					(0, vue.createCommentVNode)(" 有value又有options的按钮：单独可点击的下拉箭头 "),
 					hasOptions.value && !isOptionsOnly.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
@@ -140,6 +148,182 @@
 	KeyboardKey_vue_vue_type_script_setup_true_lang_default.__file = "src/components/KeyboardKey.vue";
 	var KeyboardKey_default = KeyboardKey_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
+	//#region src/composables/useKeyboard.ts
+	function useKeyboard(options = {}) {
+		const { immediate = false, ...keyboardOptions } = options;
+		const manager = (0, _composy_keyboard_core.createKeyboardManager)(keyboardOptions);
+		const initialState = manager.getState();
+		const visible = (0, vue.ref)(initialState.visible);
+		const type = (0, vue.ref)(initialState.type);
+		const isUpperCase = (0, vue.ref)(initialState.isUpperCase);
+		const value = (0, vue.ref)(initialState.value);
+		const cursorPosition = (0, vue.ref)(initialState.cursorPosition);
+		const layout = (0, vue.shallowRef)(manager.getLayout());
+		const state = (0, vue.reactive)({ ...initialState });
+		const syncState = (newState) => {
+			visible.value = newState.visible;
+			type.value = newState.type;
+			isUpperCase.value = newState.isUpperCase;
+			value.value = newState.value;
+			cursorPosition.value = newState.cursorPosition;
+			Object.assign(state, newState);
+		};
+		manager.on("stateChange", syncState);
+		manager.on("switch", () => {
+			layout.value = manager.getLayout();
+		});
+		if (immediate) manager.show();
+		(0, vue.onBeforeUnmount)(() => {
+			manager.destroy();
+		});
+		return {
+			visible,
+			type,
+			isUpperCase,
+			value,
+			cursorPosition,
+			layout,
+			state,
+			show: (input) => manager.show(input),
+			hide: () => manager.hide(),
+			toggle: (input) => manager.toggle(input),
+			switchType: (t) => manager.switchType(t),
+			toggleShift: () => manager.toggleShift(),
+			handleKey: (key) => manager.handleKey(key),
+			getKeyLabel: (key) => manager.getKeyLabel(key),
+			setValue: (v) => manager.setValue(v),
+			appendValue: (text) => manager.appendValue(text),
+			setMaxLength: (maxLength) => manager.setMaxLength(maxLength),
+			bindInput: (input) => manager.bindInput(input),
+			unbindInput: () => manager.unbindInput(),
+			on: (event, handler) => manager.on(event, handler),
+			once: (event, handler) => manager.once(event, handler),
+			destroy: () => manager.destroy()
+		};
+	}
+	//#endregion
+	//#region src/composables/useKeyboardPopup.ts
+	function useKeyboardPopup(options = {}) {
+		const { visible = (0, vue.ref)(false), target = (0, vue.ref)(null), popup = (0, vue.ref)(null), closeOnClickOutside = true, onClose, ...positionConfig } = options;
+		const positionManager = (0, _composy_keyboard_core.createPositionManager)(positionConfig);
+		const popupStyles = (0, vue.ref)({});
+		const maskStyles = (0, vue.ref)({});
+		const placement = (0, vue.ref)("bottom");
+		const isMobileDevice = (0, vue.ref)((0, _composy_keyboard_core.isMobile)());
+		const showMask = (0, vue.ref)(false);
+		const isAnimating = (0, vue.ref)(false);
+		let cleanupClickOutside = null;
+		let cleanupViewportChange = null;
+		let cleanupScroll = null;
+		let animationFrame = null;
+		let visibilitySession = 0;
+		const cleanupOpenResources = () => {
+			cleanupClickOutside?.();
+			cleanupClickOutside = null;
+			cleanupViewportChange?.();
+			cleanupViewportChange = null;
+			cleanupScroll?.();
+			cleanupScroll = null;
+		};
+		const cancelAnimationFrame = () => {
+			if (animationFrame === null || typeof window === "undefined") return;
+			window.cancelAnimationFrame(animationFrame);
+			animationFrame = null;
+		};
+		const updatePosition = () => {
+			const popupElement = popup.value;
+			if (!popupElement) return;
+			const popupRect = popupElement.getBoundingClientRect();
+			const result = positionManager.calculate(target.value, {
+				width: Math.max(0, popupRect.width),
+				height: Math.max(0, popupRect.height)
+			});
+			placement.value = result.placement;
+			showMask.value = positionManager.shouldShowMask();
+			if (result.placement === "bottom-sheet") popupStyles.value = {
+				position: "fixed",
+				left: "0",
+				right: "0",
+				bottom: "0",
+				maxHeight: result.maxHeight === void 0 ? void 0 : `${result.maxHeight}px`,
+				zIndex: 1e3
+			};
+			else popupStyles.value = {
+				position: "fixed",
+				left: `${result.position.x}px`,
+				top: `${result.position.y}px`,
+				maxHeight: result.maxHeight === void 0 ? void 0 : `${result.maxHeight}px`,
+				maxWidth: result.maxWidth === void 0 ? void 0 : `${result.maxWidth}px`,
+				zIndex: 1e3
+			};
+			maskStyles.value = showMask.value ? {
+				position: "fixed",
+				inset: "0",
+				backgroundColor: "var(--keyboard-mask-bg)",
+				zIndex: 999
+			} : {};
+		};
+		const close = () => {
+			if (visible.value) onClose?.();
+		};
+		(0, vue.watch)(visible, (newVisible) => {
+			visibilitySession += 1;
+			const currentSession = visibilitySession;
+			cancelAnimationFrame();
+			cleanupOpenResources();
+			if (!newVisible) {
+				isAnimating.value = false;
+				showMask.value = false;
+				popupStyles.value = {};
+				maskStyles.value = {};
+				return;
+			}
+			isMobileDevice.value = (0, _composy_keyboard_core.isMobile)();
+			isAnimating.value = true;
+			if (typeof window !== "undefined") animationFrame = window.requestAnimationFrame(() => {
+				animationFrame = null;
+				if (!visible.value || currentSession !== visibilitySession) return;
+				updatePosition();
+				isAnimating.value = false;
+				if (closeOnClickOutside && popup.value) cleanupClickOutside = (0, _composy_keyboard_core.onClickOutside)(popup.value, (event) => {
+					if (target.value && event.target instanceof Node && target.value.contains(event.target)) return;
+					close();
+				});
+			});
+			cleanupViewportChange = (0, _composy_keyboard_core.onViewportChange)(() => {
+				if (!visible.value) return;
+				isMobileDevice.value = (0, _composy_keyboard_core.isMobile)();
+				updatePosition();
+			});
+			if (!isMobileDevice.value && typeof window !== "undefined") {
+				const handleScroll = () => {
+					if (!visible.value) return;
+					window.requestAnimationFrame(updatePosition);
+				};
+				window.addEventListener("scroll", handleScroll, true);
+				cleanupScroll = () => window.removeEventListener("scroll", handleScroll, true);
+			}
+		}, { immediate: true });
+		(0, vue.watch)(target, () => {
+			if (visible.value) updatePosition();
+		});
+		(0, vue.onBeforeUnmount)(() => {
+			visibilitySession += 1;
+			cancelAnimationFrame();
+			cleanupOpenResources();
+		});
+		return {
+			popupStyles,
+			maskStyles,
+			placement,
+			isMobileDevice,
+			showMask,
+			isAnimating,
+			updatePosition,
+			close
+		};
+	}
+	//#endregion
 	//#region src/components/VirtualKeyboard.vue?vue&type=script&setup=true&lang.ts
 	const _hoisted_1$1 = { class: "virtual-keyboard" };
 	const _hoisted_2$1 = {
@@ -202,7 +386,7 @@
 			const closeOptionsPanel = () => {
 				showOptionsPanel.value = false;
 			};
-			const getRowStyle = (rowIndex) => {
+			const getRowStyle = () => {
 				return {};
 			};
 			return (_ctx, _cache) => {
@@ -211,7 +395,7 @@
 						return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 							key: rowIndex,
 							class: (0, vue.normalizeClass)(["virtual-keyboard__row", row.className]),
-							style: (0, vue.normalizeStyle)(getRowStyle(rowIndex))
+							style: (0, vue.normalizeStyle)(getRowStyle())
 						}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(row.keys, (key) => {
 							return (0, vue.openBlock)(), (0, vue.createBlock)(KeyboardKey_default, {
 								key: key.id,
@@ -228,7 +412,7 @@
 								"use-flex"
 							]);
 						}), 128))], 6);
-					}), 128)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$1, " 键盘布局未找到 ")),
+					}), 128)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$1, "键盘布局未找到")),
 					(0, vue.createCommentVNode)(" 选项面板 "),
 					(0, vue.createVNode)(vue.Transition, { name: "options-panel" }, {
 						default: (0, vue.withCtx)(() => [showOptionsPanel.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_3$1, [(0, vue.createElementVNode)("div", _hoisted_4$1, [_cache[0] || (_cache[0] = (0, vue.createElementVNode)("span", { class: "keyboard-options-panel__title" }, "选择邮箱后缀", -1)), (0, vue.createElementVNode)("button", {
@@ -256,172 +440,6 @@
 	VirtualKeyboard_vue_vue_type_script_setup_true_lang_default.__file = "src/components/VirtualKeyboard.vue";
 	var VirtualKeyboard_default = VirtualKeyboard_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
-	//#region src/composables/useKeyboard.ts
-	function useKeyboard(options = {}) {
-		const { immediate = false, ...keyboardOptions } = options;
-		const manager = (0, _composy_keyboard_core.createKeyboardManager)(keyboardOptions);
-		const visible = (0, vue.ref)(false);
-		const type = (0, vue.ref)(keyboardOptions.type ?? "qwerty");
-		const isUpperCase = (0, vue.ref)(keyboardOptions.defaultUpperCase ?? false);
-		const value = (0, vue.ref)(keyboardOptions.value ?? "");
-		const cursorPosition = (0, vue.ref)(keyboardOptions.value?.length ?? 0);
-		const layout = (0, vue.shallowRef)(manager.getLayout());
-		const state = (0, vue.reactive)({
-			visible: false,
-			type: keyboardOptions.type ?? "qwerty",
-			isUpperCase: keyboardOptions.defaultUpperCase ?? false,
-			value: keyboardOptions.value ?? "",
-			cursorPosition: keyboardOptions.value?.length ?? 0,
-			maxLength: keyboardOptions.maxLength,
-			inputElement: null
-		});
-		const syncState = (newState) => {
-			visible.value = newState.visible;
-			type.value = newState.type;
-			isUpperCase.value = newState.isUpperCase;
-			value.value = newState.value;
-			cursorPosition.value = newState.cursorPosition;
-			Object.assign(state, newState);
-		};
-		manager.on("stateChange", syncState);
-		manager.on("switch", () => {
-			layout.value = manager.getLayout();
-		});
-		if (immediate) manager.show();
-		(0, vue.onBeforeUnmount)(() => {
-			manager.destroy();
-		});
-		return {
-			visible,
-			type,
-			isUpperCase,
-			value,
-			cursorPosition,
-			layout,
-			state,
-			show: (input) => manager.show(input),
-			hide: () => manager.hide(),
-			toggle: (input) => manager.toggle(input),
-			switchType: (t) => manager.switchType(t),
-			toggleShift: () => manager.toggleShift(),
-			handleKey: (key) => manager.handleKey(key),
-			getKeyLabel: (key) => manager.getKeyLabel(key),
-			setValue: (v) => manager.setValue(v),
-			appendValue: (text) => manager.appendValue(text),
-			setMaxLength: (maxLength) => manager.setMaxLength(maxLength),
-			bindInput: (input) => manager.bindInput(input),
-			unbindInput: () => manager.unbindInput(),
-			on: (event, handler) => manager.on(event, handler),
-			once: (event, handler) => manager.once(event, handler),
-			destroy: () => manager.destroy()
-		};
-	}
-	//#endregion
-	//#region src/composables/useKeyboardPopup.ts
-	function useKeyboardPopup(options = {}) {
-		const { visible = (0, vue.ref)(false), target = (0, vue.ref)(null), popup = (0, vue.ref)(null), closeOnClickOutside = true, onClose, ...positionConfig } = options;
-		const positionManager = (0, _composy_keyboard_core.createPositionManager)(positionConfig);
-		const popupStyles = (0, vue.ref)({});
-		const maskStyles = (0, vue.ref)({});
-		const placement = (0, vue.ref)("bottom");
-		const isMobileDevice = (0, vue.ref)((0, _composy_keyboard_core.isMobile)());
-		const showMask = (0, vue.ref)(false);
-		const isAnimating = (0, vue.ref)(false);
-		let cleanupClickOutside = null;
-		let cleanupViewportChange = null;
-		let cleanupScroll = null;
-		const updatePosition = () => {
-			if (!popup.value) return;
-			const popupRect = popup.value.getBoundingClientRect();
-			const result = positionManager.calculate(target.value, {
-				width: popupRect.width || 300,
-				height: popupRect.height || 260
-			});
-			placement.value = result.placement;
-			showMask.value = positionManager.shouldShowMask();
-			if (result.placement === "bottom-sheet") popupStyles.value = {
-				position: "fixed",
-				left: "0",
-				right: "0",
-				bottom: "0",
-				maxHeight: `${result.maxHeight}px`,
-				zIndex: 1e3
-			};
-			else popupStyles.value = {
-				position: "fixed",
-				left: `${result.position.x}px`,
-				top: `${result.position.y}px`,
-				maxHeight: result.maxHeight ? `${result.maxHeight}px` : void 0,
-				maxWidth: result.maxWidth ? `${result.maxWidth}px` : void 0,
-				zIndex: 1e3
-			};
-			if (showMask.value) maskStyles.value = {
-				position: "fixed",
-				top: "0",
-				left: "0",
-				right: "0",
-				bottom: "0",
-				backgroundColor: "rgba(0, 0, 0, 0.5)",
-				zIndex: 999
-			};
-		};
-		const close = () => {
-			onClose?.();
-		};
-		(0, vue.watch)(visible, (newVisible) => {
-			if (newVisible) {
-				isMobileDevice.value = (0, _composy_keyboard_core.isMobile)();
-				requestAnimationFrame(() => {
-					updatePosition();
-					if (closeOnClickOutside && popup.value) cleanupClickOutside = (0, _composy_keyboard_core.onClickOutside)(popup.value, (event) => {
-						if (target.value && target.value.contains(event.target)) return;
-						close();
-					});
-				});
-				cleanupViewportChange = (0, _composy_keyboard_core.onViewportChange)(() => {
-					isMobileDevice.value = (0, _composy_keyboard_core.isMobile)();
-					updatePosition();
-				});
-				if (!isMobileDevice.value) {
-					const handleScroll = () => {
-						requestAnimationFrame(() => {
-							updatePosition();
-						});
-					};
-					window.addEventListener("scroll", handleScroll, true);
-					cleanupScroll = () => {
-						window.removeEventListener("scroll", handleScroll, true);
-					};
-				}
-			} else {
-				cleanupClickOutside?.();
-				cleanupClickOutside = null;
-				cleanupViewportChange?.();
-				cleanupViewportChange = null;
-				cleanupScroll?.();
-				cleanupScroll = null;
-			}
-		}, { immediate: true });
-		(0, vue.watch)(target, () => {
-			if (visible.value) updatePosition();
-		});
-		(0, vue.onBeforeUnmount)(() => {
-			cleanupClickOutside?.();
-			cleanupViewportChange?.();
-			cleanupScroll?.();
-		});
-		return {
-			popupStyles,
-			maskStyles,
-			placement,
-			isMobileDevice,
-			showMask,
-			isAnimating,
-			updatePosition,
-			close
-		};
-	}
-	//#endregion
 	//#region src/components/KeyboardPopup.vue?vue&type=script&setup=true&lang.ts
 	var KeyboardPopup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		__name: "KeyboardPopup",
@@ -481,7 +499,7 @@
 			const keyboard = useKeyboard({
 				type: props.type,
 				value: props.value,
-				maxLength: props.maxLength || (props.type.startsWith("license-plate") ? 7 : void 0),
+				maxLength: props.maxLength ?? (props.type.startsWith("license-plate") ? 7 : void 0),
 				enableVibrate: props.enableVibrate
 			});
 			const { popupStyles, maskStyles, placement, showMask, updatePosition, close: closePopup } = useKeyboardPopup({
@@ -497,6 +515,9 @@
 				keyboard.switchType(newType);
 				if (newType.startsWith("license-plate") && !props.maxLength) keyboard.setMaxLength(7);
 			});
+			(0, vue.watch)(() => props.maxLength, (maxLength) => {
+				if (maxLength !== void 0) keyboard.setMaxLength(maxLength);
+			});
 			(0, vue.watch)(() => props.value, (newValue) => {
 				if (newValue !== keyboard.value.value) keyboard.setValue(newValue);
 			});
@@ -512,7 +533,7 @@
 						updatePosition();
 					});
 				} else keyboard.hide();
-			});
+			}, { immediate: true });
 			keyboard.on("confirm", ({ value }) => {
 				emit("confirm", value);
 				emit("update:modelValue", false);
@@ -527,7 +548,7 @@
 				keyboard.appendValue(valueToAppend);
 			};
 			const handleMaskClick = () => {
-				if (props.closeOnClickOutside) emit("update:modelValue", false);
+				if (props.closeOnClickOutside) closePopup();
 			};
 			const popupClass = (0, vue.computed)(() => {
 				return [
@@ -660,7 +681,7 @@
 	var LicensePlateKeyboard_default = LicensePlateKeyboard_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region src/directives/v-keyboard.ts
-	const KEYBOARD_ATTR = "__v_keyboard__";
+	const directiveStates = /* @__PURE__ */ new WeakMap();
 	const vKeyboard = {
 		mounted(el, binding) {
 			const options = parseBinding(binding);
@@ -671,14 +692,14 @@
 			};
 			el.addEventListener("focus", handleFocus);
 			el.setAttribute("inputmode", "none");
-			el[KEYBOARD_ATTR] = { cleanup: () => {
+			directiveStates.set(el, { cleanup: () => {
 				el.removeEventListener("focus", handleFocus);
 				el.removeAttribute("inputmode");
-			} };
+			} });
 		},
 		updated(el, binding) {
-			const oldCleanup = el[KEYBOARD_ATTR]?.cleanup;
-			if (oldCleanup) oldCleanup();
+			directiveStates.get(el)?.cleanup();
+			directiveStates.delete(el);
 			const options = parseBinding(binding);
 			if (!options.enabled) return;
 			const handleFocus = () => {
@@ -687,15 +708,14 @@
 			};
 			el.addEventListener("focus", handleFocus);
 			el.setAttribute("inputmode", "none");
-			el[KEYBOARD_ATTR] = { cleanup: () => {
+			directiveStates.set(el, { cleanup: () => {
 				el.removeEventListener("focus", handleFocus);
 				el.removeAttribute("inputmode");
-			} };
+			} });
 		},
 		unmounted(el) {
-			const data = el[KEYBOARD_ATTR];
-			if (data?.cleanup) data.cleanup();
-			delete el[KEYBOARD_ATTR];
+			directiveStates.get(el)?.cleanup();
+			directiveStates.delete(el);
 		}
 	};
 	function parseBinding(binding) {
@@ -713,19 +733,35 @@
 	}
 	//#endregion
 	//#region src/plugins/engine-plugin.ts
+	function isRecord(value) {
+		return typeof value === "object" && value !== null;
+	}
+	function isVueApp(value) {
+		return isRecord(value) && typeof value.component === "function" && typeof value.directive === "function";
+	}
+	function getEngineContext(value) {
+		if (!isRecord(value)) return {};
+		const framework = isRecord(value.framework) ? value.framework : void 0;
+		const container = isRecord(value.container) ? value.container : void 0;
+		return {
+			framework: isVueApp(framework?.app) ? { app: framework.app } : void 0,
+			container: typeof container?.singleton === "function" ? { singleton: container.singleton } : void 0
+		};
+	}
 	const KeyboardEnginePlugin = {
 		name: "keyboard",
 		version: "0.1.0",
 		async install(context, options) {
 			const prefix = options?.prefix ?? "L";
-			const app = context?.framework?.app;
+			const engineContext = getEngineContext(context);
+			const app = engineContext.framework?.app;
 			if (app) {
 				app.component(`${prefix}Keyboard`, VirtualKeyboard_default);
 				app.component(`${prefix}KeyboardPopup`, KeyboardPopup_default);
 				app.component(`${prefix}LicensePlateKeyboard`, LicensePlateKeyboard_default);
 				app.directive("keyboard", vKeyboard);
 			}
-			if (context?.container?.singleton) context.container.singleton("keyboard", {
+			if (engineContext.container?.singleton) engineContext.container.singleton("keyboard", {
 				name: "keyboard",
 				version: "0.1.0"
 			});