@composy/keyboard-vue 0.0.1

package/dist/index.js

@@ -0,0 +1,1250 @@
+/*!
+* ***********************************
+* @composy/keyboard-vue v0.0.1    *
+* Built with rollup               *
+* Build time: 2024-08-17 11:42:14 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+(function(global, factory) {
+	typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("@composy/keyboard-core")) : typeof define === "function" && define.amd ? define([
+		"exports",
+		"vue",
+		"@composy/keyboard-core"
+	], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.LDesignPackagesVue3 = {}, global.Vue, global.ComposyKeyboardCore));
+})(this, function(exports, vue, _composy_keyboard_core) {
+	Object.defineProperties(exports, {
+		__esModule: { value: true },
+		[Symbol.toStringTag]: { value: "Module" }
+	});
+	//#region src/components/KeyboardKey.vue?vue&type=script&setup=true&lang.ts
+	const _hoisted_1$2 = ["disabled"];
+	const _hoisted_2$2 = ["innerHTML"];
+	const _hoisted_3$2 = {
+		key: 1,
+		class: "keyboard-key__label"
+	};
+	const _hoisted_4$2 = {
+		key: 2,
+		class: "keyboard-key__arrow-inline"
+	};
+	var KeyboardKey_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+		__name: "KeyboardKey",
+		props: {
+			keyDef: {
+				type: Object,
+				required: true
+			},
+			isUpperCase: {
+				type: Boolean,
+				required: false
+			},
+			baseWidth: {
+				type: Number,
+				required: false
+			},
+			useFlex: {
+				type: Boolean,
+				required: false
+			}
+		},
+		emits: ["press", "showOptions"],
+		setup(__props, { emit: __emit }) {
+			const props = __props;
+			const emit = __emit;
+			const label = (0, vue.computed)(() => {
+				const keyLabel = props.keyDef.label;
+				if (typeof keyLabel === "string") return keyLabel;
+				return props.isUpperCase ? keyLabel.upper : keyLabel.lower;
+			});
+			const keyWidth = (0, vue.computed)(() => {
+				if (props.useFlex) return;
+				const base = props.baseWidth ?? 36;
+				const width = props.keyDef.width ?? 1;
+				return `${base * width + (width - 1) * 6}px`;
+			});
+			const keyFlex = (0, vue.computed)(() => {
+				if (!props.useFlex) return;
+				return props.keyDef.width ?? 1;
+			});
+			const keyClass = (0, vue.computed)(() => {
+				const classes = ["keyboard-key", `keyboard-key--${props.keyDef.type}`];
+				if (props.keyDef.className) classes.push(props.keyDef.className);
+				if (props.keyDef.disabled) classes.push("keyboard-key--disabled");
+				if (props.keyDef.type === "shift" && props.isUpperCase) classes.push("keyboard-key--active");
+				return classes;
+			});
+			const hasOptions = (0, vue.computed)(() => {
+				return props.keyDef.options && props.keyDef.options.length > 0;
+			});
+			const isOptionsOnly = (0, vue.computed)(() => {
+				return hasOptions.value && !props.keyDef.value;
+			});
+			const handlePress = (event) => {
+				event.preventDefault();
+				event.stopPropagation();
+				if (props.keyDef.disabled) return;
+				if (isOptionsOnly.value) {
+					emit("showOptions", props.keyDef.options);
+					return;
+				}
+				emit("press", props.keyDef);
+			};
+			const handleArrowClick = (event) => {
+				event.preventDefault();
+				event.stopPropagation();
+				if (props.keyDef.disabled) return;
+				if (hasOptions.value) emit("showOptions", props.keyDef.options);
+			};
+			return (_ctx, _cache) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					class: "keyboard-key-wrapper",
+					style: (0, vue.normalizeStyle)({
+						width: keyWidth.value,
+						flex: keyFlex.value
+					})
+				}, [
+					(0, vue.createElementVNode)("button", {
+						class: (0, vue.normalizeClass)([keyClass.value, {
+							"has-options": hasOptions.value && !isOptionsOnly.value,
+							"is-options-only": isOptionsOnly.value
+						}]),
+						disabled: __props.keyDef.disabled,
+						type: "button",
+						onMousedown: (0, vue.withModifiers)(handlePress, ["prevent"]),
+						onTouchstart: (0, vue.withModifiers)(handlePress, ["prevent"])
+					}, [
+						(0, vue.createCommentVNode)(" SVG 图标支持 "),
+						__props.keyDef.icon ? ((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)),
+						(0, vue.createCommentVNode)(" 纯选项按钮内嵌下拉箭头 "),
+						isOptionsOnly.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_4$2, "▼")) : (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", {
+						key: 0,
+						class: "keyboard-key__arrow",
+						onMousedown: (0, vue.withModifiers)(handleArrowClick, ["prevent"]),
+						onTouchstart: (0, vue.withModifiers)(handleArrowClick, ["prevent"])
+					}, "▼", 32)) : (0, vue.createCommentVNode)("v-if", true)
+				], 4);
+			};
+		}
+	});
+	//#endregion
+	//#region src/components/KeyboardKey.vue
+	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/components/VirtualKeyboard.vue?vue&type=script&setup=true&lang.ts
+	const _hoisted_1$1 = { class: "virtual-keyboard" };
+	const _hoisted_2$1 = {
+		key: 1,
+		class: "virtual-keyboard__empty"
+	};
+	const _hoisted_3$1 = {
+		key: 0,
+		class: "keyboard-options-panel"
+	};
+	const _hoisted_4$1 = { class: "keyboard-options-panel__header" };
+	const _hoisted_5 = { class: "keyboard-options-panel__grid" };
+	const _hoisted_6 = ["onMousedown", "onTouchstart"];
+	var VirtualKeyboard_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+		__name: "VirtualKeyboard",
+		props: {
+			type: {
+				type: String,
+				required: false,
+				default: "qwerty"
+			},
+			isUpperCase: {
+				type: Boolean,
+				required: false,
+				default: false
+			},
+			layout: {
+				type: Object,
+				required: false
+			},
+			keyWidth: {
+				type: Number,
+				required: false,
+				default: 36
+			}
+		},
+		emits: ["keypress", "selectOption"],
+		setup(__props, { emit: __emit }) {
+			const props = __props;
+			const emit = __emit;
+			const showOptionsPanel = (0, vue.ref)(false);
+			const currentOptions = (0, vue.ref)([]);
+			const currentLayout = (0, vue.computed)(() => {
+				if (props.layout) return props.layout;
+				return (0, _composy_keyboard_core.getLayout)(props.type) ?? null;
+			});
+			const handleKeyPress = (key) => {
+				emit("keypress", key);
+			};
+			const handleShowOptions = (options) => {
+				currentOptions.value = options;
+				showOptionsPanel.value = true;
+			};
+			const handleSelectOption = (option, event) => {
+				event.preventDefault();
+				event.stopPropagation();
+				showOptionsPanel.value = false;
+				emit("selectOption", option);
+			};
+			const closeOptionsPanel = () => {
+				showOptionsPanel.value = false;
+			};
+			const getRowStyle = (rowIndex) => {
+				return {};
+			};
+			return (_ctx, _cache) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$1, [
+					currentLayout.value ? ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, (0, vue.renderList)(currentLayout.value.rows, (row, rowIndex) => {
+						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))
+						}, [((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,
+								"key-def": key,
+								"is-upper-case": __props.isUpperCase,
+								"base-width": __props.keyWidth,
+								"use-flex": row.className === "numpad-row",
+								onPress: handleKeyPress,
+								onShowOptions: handleShowOptions
+							}, null, 8, [
+								"key-def",
+								"is-upper-case",
+								"base-width",
+								"use-flex"
+							]);
+						}), 128))], 6);
+					}), 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", {
+							class: "keyboard-options-panel__close",
+							type: "button",
+							onClick: closeOptionsPanel,
+							onTouchstart: (0, vue.withModifiers)(closeOptionsPanel, ["prevent"])
+						}, " × ", 32)]), (0, vue.createElementVNode)("div", _hoisted_5, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(currentOptions.value, (option) => {
+							return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+								key: option,
+								class: "keyboard-options-panel__item",
+								type: "button",
+								onMousedown: (0, vue.withModifiers)((e) => handleSelectOption(option, e), ["prevent"]),
+								onTouchstart: (0, vue.withModifiers)((e) => handleSelectOption(option, e), ["prevent"])
+							}, (0, vue.toDisplayString)(option), 41, _hoisted_6);
+						}), 128))])])) : (0, vue.createCommentVNode)("v-if", true)]),
+						_: 1
+					})
+				]);
+			};
+		}
+	});
+	//#endregion
+	//#region src/components/VirtualKeyboard.vue
+	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",
+		props: {
+			modelValue: {
+				type: Boolean,
+				required: false,
+				default: false
+			},
+			type: {
+				type: String,
+				required: false,
+				default: "qwerty"
+			},
+			value: {
+				type: String,
+				required: false,
+				default: ""
+			},
+			target: {
+				type: null,
+				required: false,
+				default: null
+			},
+			maxLength: {
+				type: Number,
+				required: false
+			},
+			closeOnClickOutside: {
+				type: Boolean,
+				required: false,
+				default: true
+			},
+			enableVibrate: {
+				type: Boolean,
+				required: false,
+				default: true
+			},
+			teleportTo: {
+				type: null,
+				required: false,
+				default: "body"
+			}
+		},
+		emits: [
+			"update:modelValue",
+			"update:value",
+			"confirm",
+			"keypress"
+		],
+		setup(__props, { emit: __emit }) {
+			const props = __props;
+			const emit = __emit;
+			const popupRef = (0, vue.ref)(null);
+			const targetRef = (0, vue.computed)(() => props.target);
+			const isMobileDevice = (0, vue.ref)((0, _composy_keyboard_core.isMobile)());
+			const keyboard = useKeyboard({
+				type: props.type,
+				value: props.value,
+				maxLength: props.maxLength || (props.type.startsWith("license-plate") ? 7 : void 0),
+				enableVibrate: props.enableVibrate
+			});
+			const { popupStyles, maskStyles, placement, showMask, updatePosition, close: closePopup } = useKeyboardPopup({
+				visible: (0, vue.computed)(() => props.modelValue),
+				target: targetRef,
+				popup: popupRef,
+				closeOnClickOutside: props.closeOnClickOutside,
+				onClose: () => {
+					emit("update:modelValue", false);
+				}
+			});
+			(0, vue.watch)(() => props.type, (newType) => {
+				keyboard.switchType(newType);
+				if (newType.startsWith("license-plate") && !props.maxLength) keyboard.setMaxLength(7);
+			});
+			(0, vue.watch)(() => props.value, (newValue) => {
+				if (newValue !== keyboard.value.value) keyboard.setValue(newValue);
+			});
+			(0, vue.watch)(keyboard.value, (newValue) => {
+				emit("update:value", newValue);
+			});
+			(0, vue.watch)(() => props.modelValue, (visible) => {
+				if (visible) {
+					isMobileDevice.value = (0, _composy_keyboard_core.isMobile)();
+					if (props.target) keyboard.bindInput(props.target);
+					keyboard.show(props.target ?? void 0);
+					(0, vue.nextTick)(() => {
+						updatePosition();
+					});
+				} else keyboard.hide();
+			});
+			keyboard.on("confirm", ({ value }) => {
+				emit("confirm", value);
+				emit("update:modelValue", false);
+			});
+			const handleKeyPress = (key) => {
+				keyboard.handleKey(key);
+				emit("keypress", key);
+			};
+			const handleSelectOption = (option) => {
+				let valueToAppend = option;
+				if (option.startsWith("@") && keyboard.value.value.endsWith("@")) valueToAppend = option.slice(1);
+				keyboard.appendValue(valueToAppend);
+			};
+			const handleMaskClick = () => {
+				if (props.closeOnClickOutside) emit("update:modelValue", false);
+			};
+			const popupClass = (0, vue.computed)(() => {
+				return [
+					"keyboard-popup",
+					`keyboard-popup--${placement.value}`,
+					{
+						"keyboard-popup--mobile": isMobileDevice.value,
+						"keyboard-popup--desktop": !isMobileDevice.value
+					}
+				];
+			});
+			return (_ctx, _cache) => {
+				return (0, vue.openBlock)(), (0, vue.createBlock)(vue.Teleport, { to: __props.teleportTo }, [(0, vue.createVNode)(vue.Transition, { name: "keyboard-mask" }, {
+					default: (0, vue.withCtx)(() => [__props.modelValue && (0, vue.unref)(showMask) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+						key: 0,
+						class: "keyboard-mask",
+						style: (0, vue.normalizeStyle)((0, vue.unref)(maskStyles)),
+						onClick: handleMaskClick
+					}, null, 4)) : (0, vue.createCommentVNode)("v-if", true)]),
+					_: 1
+				}), (0, vue.createVNode)(vue.Transition, { name: isMobileDevice.value ? "keyboard-slide" : "keyboard-fade" }, {
+					default: (0, vue.withCtx)(() => [__props.modelValue ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+						key: 0,
+						ref_key: "popupRef",
+						ref: popupRef,
+						class: (0, vue.normalizeClass)(popupClass.value),
+						style: (0, vue.normalizeStyle)((0, vue.unref)(popupStyles)),
+						onMousedown: _cache[0] || (_cache[0] = (0, vue.withModifiers)(() => {}, ["prevent"])),
+						onTouchstart: _cache[1] || (_cache[1] = (0, vue.withModifiers)(() => {}, ["prevent"]))
+					}, [(0, vue.createVNode)(VirtualKeyboard_default, {
+						type: (0, vue.unref)(keyboard).type.value,
+						"is-upper-case": (0, vue.unref)(keyboard).isUpperCase.value,
+						onKeypress: handleKeyPress,
+						onSelectOption: handleSelectOption
+					}, null, 8, ["type", "is-upper-case"])], 38)) : (0, vue.createCommentVNode)("v-if", true)]),
+					_: 1
+				}, 8, ["name"])], 8, ["to"]);
+			};
+		}
+	});
+	//#endregion
+	//#region src/components/KeyboardPopup.vue
+	KeyboardPopup_vue_vue_type_script_setup_true_lang_default.__file = "src/components/KeyboardPopup.vue";
+	var KeyboardPopup_default = KeyboardPopup_vue_vue_type_script_setup_true_lang_default;
+	//#endregion
+	//#region src/components/LicensePlateKeyboard.vue?vue&type=script&setup=true&lang.ts
+	const _hoisted_1 = { class: "license-plate-keyboard" };
+	const _hoisted_2 = { class: "license-plate-keyboard__display" };
+	const _hoisted_3 = { class: "license-plate-keyboard__value" };
+	const _hoisted_4 = { class: "license-plate-keyboard__hint" };
+	var LicensePlateKeyboard_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+		__name: "LicensePlateKeyboard",
+		props: {
+			modelValue: {
+				type: String,
+				required: false,
+				default: ""
+			},
+			newEnergy: {
+				type: Boolean,
+				required: false,
+				default: false
+			}
+		},
+		emits: ["update:modelValue", "done"],
+		setup(__props, { emit: __emit }) {
+			const props = __props;
+			const emit = __emit;
+			const maxLength = (0, vue.computed)(() => props.newEnergy ? 8 : 7);
+			const keyboard = useKeyboard({
+				type: "license-plate-province",
+				value: props.modelValue,
+				maxLength: maxLength.value,
+				enableVibrate: true
+			});
+			(0, vue.watch)(() => props.modelValue, (newValue) => {
+				if (newValue !== keyboard.value.value) keyboard.setValue(newValue);
+			});
+			(0, vue.watch)(keyboard.value, (newValue) => {
+				emit("update:modelValue", newValue);
+			});
+			(0, vue.watch)(maxLength, (newMaxLength) => {
+				keyboard.setMaxLength(newMaxLength);
+				if (props.modelValue.length > newMaxLength) {
+					const truncated = props.modelValue.slice(0, newMaxLength);
+					keyboard.setValue(truncated);
+					emit("update:modelValue", truncated);
+				}
+			});
+			keyboard.on("confirm", ({ value }) => {
+				emit("done", value);
+			});
+			const handleKeyPress = (key) => {
+				keyboard.handleKey(key);
+			};
+			const positionHint = (0, vue.computed)(() => {
+				const len = props.modelValue.length;
+				if (len === 0) return "请选择省份";
+				if (len === 1) return "请输入字母";
+				if (len < maxLength.value) return `\u7B2C${len + 1}\u4F4D`;
+				return "已完成";
+			});
+			return (_ctx, _cache) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, [
+					(0, vue.createCommentVNode)(" 输入显示区 "),
+					(0, vue.createElementVNode)("div", _hoisted_2, [(0, vue.createElementVNode)("div", _hoisted_3, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.modelValue.padEnd(maxLength.value, " ").split(""), (char, index) => {
+						return (0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+							key: index,
+							class: (0, vue.normalizeClass)(["license-plate-keyboard__char", {
+								"license-plate-keyboard__char--filled": char !== " ",
+								"license-plate-keyboard__char--current": index === __props.modelValue.length,
+								"license-plate-keyboard__char--province": index === 0,
+								"license-plate-keyboard__char--new-energy": __props.newEnergy && index === 7
+							}])
+						}, (0, vue.toDisplayString)(char === " " ? "" : char), 3);
+					}), 128))]), (0, vue.createElementVNode)("div", _hoisted_4, (0, vue.toDisplayString)(positionHint.value), 1)]),
+					(0, vue.createCommentVNode)(" 键盘区 - 由 core 的 KeyboardManager 自动切换布局 "),
+					(0, vue.createVNode)(VirtualKeyboard_default, {
+						type: (0, vue.unref)(keyboard).type.value,
+						"is-upper-case": (0, vue.unref)(keyboard).isUpperCase.value,
+						onKeypress: handleKeyPress
+					}, null, 8, ["type", "is-upper-case"])
+				]);
+			};
+		}
+	});
+	//#endregion
+	//#region src/components/LicensePlateKeyboard.vue
+	LicensePlateKeyboard_vue_vue_type_script_setup_true_lang_default.__file = "src/components/LicensePlateKeyboard.vue";
+	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 vKeyboard = {
+		mounted(el, binding) {
+			const options = parseBinding(binding);
+			if (!options.enabled) return;
+			const handleFocus = () => {
+				el.blur();
+				options.onOpen?.(el);
+			};
+			el.addEventListener("focus", handleFocus);
+			el.setAttribute("inputmode", "none");
+			el[KEYBOARD_ATTR] = { cleanup: () => {
+				el.removeEventListener("focus", handleFocus);
+				el.removeAttribute("inputmode");
+			} };
+		},
+		updated(el, binding) {
+			const oldCleanup = el[KEYBOARD_ATTR]?.cleanup;
+			if (oldCleanup) oldCleanup();
+			const options = parseBinding(binding);
+			if (!options.enabled) return;
+			const handleFocus = () => {
+				el.blur();
+				options.onOpen?.(el);
+			};
+			el.addEventListener("focus", handleFocus);
+			el.setAttribute("inputmode", "none");
+			el[KEYBOARD_ATTR] = { cleanup: () => {
+				el.removeEventListener("focus", handleFocus);
+				el.removeAttribute("inputmode");
+			} };
+		},
+		unmounted(el) {
+			const data = el[KEYBOARD_ATTR];
+			if (data?.cleanup) data.cleanup();
+			delete el[KEYBOARD_ATTR];
+		}
+	};
+	function parseBinding(binding) {
+		const value = binding.value;
+		if (value === false) return { enabled: false };
+		if (value === true || value === void 0) return { enabled: true };
+		if (typeof value === "string") return {
+			enabled: true,
+			type: value
+		};
+		return {
+			enabled: value.enabled !== false,
+			...value
+		};
+	}
+	//#endregion
+	//#region src/plugins/engine-plugin.ts
+	const KeyboardEnginePlugin = {
+		name: "keyboard",
+		version: "0.1.0",
+		async install(context, options) {
+			const prefix = options?.prefix ?? "L";
+			const app = context?.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", {
+				name: "keyboard",
+				version: "0.1.0"
+			});
+		}
+	};
+	//#endregion
+	//#region src/index.ts
+	const KeyboardVuePlugin = { install(app, options = {}) {
+		const prefix = options.prefix ?? "L";
+		app.component(`${prefix}Keyboard`, VirtualKeyboard_default);
+		app.component(`${prefix}KeyboardPopup`, KeyboardPopup_default);
+		app.component(`${prefix}LicensePlateKeyboard`, LicensePlateKeyboard_default);
+		app.directive("keyboard", vKeyboard);
+	} };
+	const KeyboardPlugin = KeyboardVuePlugin;
+	//#endregion
+	Object.defineProperty(exports, "EMAIL_SUFFIXES", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.EMAIL_SUFFIXES;
+		}
+	});
+	Object.defineProperty(exports, "EventEmitter", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.EventEmitter;
+		}
+	});
+	exports.KeyboardEnginePlugin = KeyboardEnginePlugin;
+	exports.KeyboardKey = KeyboardKey_default;
+	Object.defineProperty(exports, "KeyboardManager", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.KeyboardManager;
+		}
+	});
+	exports.KeyboardPlugin = KeyboardPlugin;
+	exports.KeyboardPopup = KeyboardPopup_default;
+	Object.defineProperty(exports, "KeyboardRenderer", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.KeyboardRenderer;
+		}
+	});
+	exports.KeyboardVuePlugin = KeyboardVuePlugin;
+	exports.default = KeyboardVuePlugin;
+	exports.LicensePlateKeyboard = LicensePlateKeyboard_default;
+	Object.defineProperty(exports, "PLATE_LETTERS", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.PLATE_LETTERS;
+		}
+	});
+	Object.defineProperty(exports, "PROVINCES", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.PROVINCES;
+		}
+	});
+	Object.defineProperty(exports, "PositionManager", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.PositionManager;
+		}
+	});
+	exports.VirtualKeyboard = VirtualKeyboard_default;
+	Object.defineProperty(exports, "amountLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.amountLayout;
+		}
+	});
+	Object.defineProperty(exports, "amountSimpleLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.amountSimpleLayout;
+		}
+	});
+	Object.defineProperty(exports, "applyFormatter", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.applyFormatter;
+		}
+	});
+	Object.defineProperty(exports, "applyTheme", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.applyTheme;
+		}
+	});
+	Object.defineProperty(exports, "bankcardLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.bankcardLayout;
+		}
+	});
+	Object.defineProperty(exports, "createKeyboardManager", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.createKeyboardManager;
+		}
+	});
+	Object.defineProperty(exports, "createKeyboardRenderer", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.createKeyboardRenderer;
+		}
+	});
+	Object.defineProperty(exports, "createPositionManager", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.createPositionManager;
+		}
+	});
+	Object.defineProperty(exports, "createRandomLetterLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.createRandomLetterLayout;
+		}
+	});
+	Object.defineProperty(exports, "createRandomMixedLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.createRandomMixedLayout;
+		}
+	});
+	Object.defineProperty(exports, "createRandomNumberLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.createRandomNumberLayout;
+		}
+	});
+	Object.defineProperty(exports, "createRandomPinLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.createRandomPinLayout;
+		}
+	});
+	Object.defineProperty(exports, "createTheme", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.createTheme;
+		}
+	});
+	Object.defineProperty(exports, "darkTheme", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.darkTheme;
+		}
+	});
+	Object.defineProperty(exports, "defaultTheme", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.defaultTheme;
+		}
+	});
+	Object.defineProperty(exports, "deleteCharBeforeCursor", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.deleteCharBeforeCursor;
+		}
+	});
+	Object.defineProperty(exports, "emailLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.emailLayout;
+		}
+	});
+	Object.defineProperty(exports, "formatAmount", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.formatAmount;
+		}
+	});
+	Object.defineProperty(exports, "formatBankCard", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.formatBankCard;
+		}
+	});
+	Object.defineProperty(exports, "formatIdCard", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.formatIdCard;
+		}
+	});
+	Object.defineProperty(exports, "formatLicensePlate", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.formatLicensePlate;
+		}
+	});
+	Object.defineProperty(exports, "formatPhone", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.formatPhone;
+		}
+	});
+	Object.defineProperty(exports, "formatVerifyCode", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.formatVerifyCode;
+		}
+	});
+	Object.defineProperty(exports, "generateThemeStyle", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.generateThemeStyle;
+		}
+	});
+	Object.defineProperty(exports, "getAllThemes", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.getAllThemes;
+		}
+	});
+	Object.defineProperty(exports, "getAvailableLayouts", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.getAvailableLayouts;
+		}
+	});
+	Object.defineProperty(exports, "getAvailableThemes", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.getAvailableThemes;
+		}
+	});
+	Object.defineProperty(exports, "getBoundingRect", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.getBoundingRect;
+		}
+	});
+	Object.defineProperty(exports, "getCurrentTheme", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.getCurrentTheme;
+		}
+	});
+	Object.defineProperty(exports, "getDeviceType", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.getDeviceType;
+		}
+	});
+	Object.defineProperty(exports, "getFormatter", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.getFormatter;
+		}
+	});
+	Object.defineProperty(exports, "getLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.getLayout;
+		}
+	});
+	Object.defineProperty(exports, "getRandomAlphanumeric", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.getRandomAlphanumeric;
+		}
+	});
+	Object.defineProperty(exports, "getRandomLetters", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.getRandomLetters;
+		}
+	});
+	Object.defineProperty(exports, "getRandomNumbers", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.getRandomNumbers;
+		}
+	});
+	Object.defineProperty(exports, "getTheme", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.getTheme;
+		}
+	});
+	Object.defineProperty(exports, "getViewportInfo", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.getViewportInfo;
+		}
+	});
+	Object.defineProperty(exports, "hasLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.hasLayout;
+		}
+	});
+	Object.defineProperty(exports, "idcardLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.idcardLayout;
+		}
+	});
+	Object.defineProperty(exports, "insertTextAtCursor", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.insertTextAtCursor;
+		}
+	});
+	Object.defineProperty(exports, "integerLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.integerLayout;
+		}
+	});
+	Object.defineProperty(exports, "iosTheme", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.iosTheme;
+		}
+	});
+	Object.defineProperty(exports, "isMobile", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.isMobile;
+		}
+	});
+	Object.defineProperty(exports, "isTouchDevice", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.isTouchDevice;
+		}
+	});
+	Object.defineProperty(exports, "licensePlateAlphanumericLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.licensePlateAlphanumericLayout;
+		}
+	});
+	Object.defineProperty(exports, "licensePlateLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.licensePlateLayout;
+		}
+	});
+	Object.defineProperty(exports, "licensePlateLetterLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.licensePlateLetterLayout;
+		}
+	});
+	Object.defineProperty(exports, "licensePlateProvinceLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.licensePlateProvinceLayout;
+		}
+	});
+	Object.defineProperty(exports, "materialTheme", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.materialTheme;
+		}
+	});
+	Object.defineProperty(exports, "mergeTheme", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.mergeTheme;
+		}
+	});
+	Object.defineProperty(exports, "minimalTheme", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.minimalTheme;
+		}
+	});
+	Object.defineProperty(exports, "miuiTheme", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.miuiTheme;
+		}
+	});
+	Object.defineProperty(exports, "numberLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.numberLayout;
+		}
+	});
+	Object.defineProperty(exports, "onClickOutside", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.onClickOutside;
+		}
+	});
+	Object.defineProperty(exports, "onViewportChange", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.onViewportChange;
+		}
+	});
+	Object.defineProperty(exports, "phoneLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.phoneLayout;
+		}
+	});
+	Object.defineProperty(exports, "phoneSimpleLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.phoneSimpleLayout;
+		}
+	});
+	Object.defineProperty(exports, "presetThemes", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.presetThemes;
+		}
+	});
+	Object.defineProperty(exports, "punctLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.punctLayout;
+		}
+	});
+	Object.defineProperty(exports, "qwertyLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.qwertyLayout;
+		}
+	});
+	Object.defineProperty(exports, "refreshRandomLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.refreshRandomLayout;
+		}
+	});
+	Object.defineProperty(exports, "registerFormatter", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.registerFormatter;
+		}
+	});
+	Object.defineProperty(exports, "registerLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.registerLayout;
+		}
+	});
+	Object.defineProperty(exports, "registerLayouts", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.registerLayouts;
+		}
+	});
+	Object.defineProperty(exports, "registerTheme", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.registerTheme;
+		}
+	});
+	Object.defineProperty(exports, "searchLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.searchLayout;
+		}
+	});
+	Object.defineProperty(exports, "setCurrentTheme", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.setCurrentTheme;
+		}
+	});
+	Object.defineProperty(exports, "shuffleArray", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.shuffleArray;
+		}
+	});
+	Object.defineProperty(exports, "symbolLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.symbolLayout;
+		}
+	});
+	Object.defineProperty(exports, "symbolLayout2", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.symbolLayout2;
+		}
+	});
+	Object.defineProperty(exports, "themeToCSS", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.themeToCSS;
+		}
+	});
+	Object.defineProperty(exports, "unregisterLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.unregisterLayout;
+		}
+	});
+	Object.defineProperty(exports, "urlLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.urlLayout;
+		}
+	});
+	exports.useKeyboard = useKeyboard;
+	exports.useKeyboardPopup = useKeyboardPopup;
+	exports.vKeyboard = vKeyboard;
+	Object.defineProperty(exports, "verifycodeLayout", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.verifycodeLayout;
+		}
+	});
+	Object.defineProperty(exports, "vibrate", {
+		enumerable: true,
+		get: function() {
+			return _composy_keyboard_core.vibrate;
+		}
+	});
+});
+/*! End of @composy/keyboard-vue | Powered by @composy/builder */
+//# sourceMappingURL=index.js.map